/* ブロック崩しゲーム固有スタイル */

.bo-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: min(100%, 480px);
  margin: 0 auto 14px;
  padding: 12px 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
}

.bo-status__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
}

.bo-status__label {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.bo-status__value {
  color: var(--md-sys-color-on-surface);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.bo-stage {
  position: relative;
  width: 100%;
  max-width: min(100%, 480px);
  margin: 0 auto 14px;
}

/* ゲーム領域内だけタッチ操作を占有し、領域外のページスクロールは妨げない */
.bo-canvas {
  display: block;
  width: 100%;
  aspect-ratio: var(--bo-ratio, 480 / 540);
  border: 1px solid rgba(96, 154, 214, 0.35);
  border-radius: var(--md-sys-shape-corner-large);
  background: #0d1730;
  box-shadow: 0 14px 34px rgba(28, 52, 96, 0.24);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bo-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 16px;
  border-radius: var(--md-sys-shape-corner-large);
  background: rgba(11, 20, 42, 0.92);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: center;
  animation: bo-fade 180ms ease-out;
}

@keyframes bo-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bo-overlay__title {
  margin: 0;
  color: #ffffff;
  font-family: "Outfit", "Noto Sans JP", sans-serif;
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bo-overlay.is-clear .bo-overlay__title {
  color: #a8f0ff;
  text-shadow: 0 0 18px rgba(96, 220, 255, 0.7), 0 0 34px rgba(150, 106, 255, 0.45);
}

.bo-overlay.is-over .bo-overlay__title {
  color: #ffc7d3;
  text-shadow: 0 0 18px rgba(255, 107, 138, 0.55);
}

.bo-overlay__detail {
  margin: 0;
  color: rgba(230, 240, 255, 0.86);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.bo-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.bo-overlay__actions .btn {
  min-width: 8.5rem;
  justify-content: center;
}

.bo-guide {
  max-width: min(100%, 480px);
  margin: 0 auto 4px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
}

.game-panel {
  margin-top: 20px;
}

.game-controls {
  justify-content: center;
  max-width: min(100%, 480px);
  margin-left: auto;
  margin-right: auto;
}

.game-controls .btn {
  flex: 1 1 calc(50% - 6px);
  min-width: 7.5rem;
  justify-content: center;
}

@media (max-width: 480px) {
  /* 狭い画面ではカードの内側余白ぶんだけゲーム領域を広げる */
  .bo-stage {
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
  }

  .bo-status {
    gap: 6px;
    padding: 10px;
  }

  .bo-status__label {
    font-size: 0.68rem;
  }

  .bo-status__value {
    font-size: 1rem;
  }

  .bo-overlay__actions .btn {
    min-width: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-overlay {
    animation: none;
  }
}

/* ——— プレイ画面（/css/game-screen.css の全画面表示中・ダークテーマ） ——— */
/* 上段の左に戻る、右に操作ボタンを置き、その下に情報・ゲーム画面・説明を並べる */
/* ゲーム画面は盤面の比率（--bo-ratio、JS が設定）を保って残りの領域に収め、大画面でも幅 640px までにとどめる */
html.gs-playing .game-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "bar . controls"
    "status status status"
    "stage stage stage"
    "guide guide guide";
  column-gap: 10px;
}

html.gs-playing .game-panel > .gs-bar {
  grid-area: bar;
  margin: 0 0 10px;
}

html.gs-playing .bo-status,
html.gs-playing .bo-guide {
  justify-self: center;
  width: 100%;
  max-width: min(100%, 640px);
}

html.gs-playing .bo-status {
  grid-area: status;
  gap: 0;
  margin: 0 0 10px;
  padding: 6px 4px;
  border-color: var(--play-border);
  background: color-mix(in srgb, var(--play-hud-bg) 88%, transparent);
}

html.gs-playing .bo-status__item {
  padding: 2px 8px;
  border-radius: 0;
  background: none;
}

html.gs-playing .bo-status__item + .bo-status__item {
  border-left: 1px solid var(--play-border);
}

html.gs-playing .bo-status__label {
  color: var(--play-text-muted);
}

html.gs-playing .bo-status__value {
  color: var(--play-text);
}

html.gs-playing .game-panel .game-controls {
  grid-area: controls;
  flex-wrap: nowrap;
  gap: 8px;
  width: auto;
  max-width: none;
  margin: 0 0 10px;
}

html.gs-playing .game-panel .game-controls .gs-icon-btn {
  flex: none;
  min-width: 44px;
}

html.gs-playing .bo-stage-area {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin-bottom: 10px;
  container-type: size;
}

html.gs-playing .bo-stage {
  width: min(100cqw, 100cqh * var(--bo-ratio, 0.8889), 640px);
  max-width: none;
  margin: 0;
}

html.gs-playing .bo-canvas {
  border-color: var(--play-border);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
}

html.gs-playing .bo-guide {
  grid-area: guide;
  margin: 0;
  color: var(--play-text-muted);
}

/* PC で高さが足りないウィンドウでは、情報と操作を左、ゲーム画面を右に並べる */
@media (orientation: landscape) and (max-height: 500px) and (hover: hover),
  (orientation: landscape) and (max-height: 500px) and (pointer: fine) {
  html.gs-playing .game-panel {
    grid-template-columns: minmax(170px, 260px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "bar stage"
      "status stage"
      "controls stage"
      "guide stage";
    column-gap: 16px;
  }

  html.gs-playing .bo-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  html.gs-playing .bo-status__item + .bo-status__item {
    border-left: none;
  }

  html.gs-playing .bo-status__item {
    border-radius: var(--md-sys-shape-corner-medium);
    background: rgba(255, 255, 255, .04);
  }

  html.gs-playing .game-panel .game-controls {
    justify-content: flex-start;
  }

  html.gs-playing .bo-guide {
    font-size: .75rem;
    text-align: left;
  }

  html.gs-playing .bo-stage-area {
    min-height: 0;
    margin: 0;
  }
}

/* スマートフォン横向き：上部の1行に操作と情報をまとめ、残りをすべて横長のゲーム画面に使う */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  html.gs-playing .game-panel {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "bar status controls"
      "stage stage stage";
    gap: 6px 10px;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  html.gs-playing .game-panel > .gs-bar,
  html.gs-playing .game-panel .game-controls {
    margin: 0;
  }

  html.gs-playing .bo-status {
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    align-self: center;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 3px 2px;
  }

  html.gs-playing .bo-status__item {
    gap: 0;
    min-width: 3.5rem;
    padding: 1px 12px;
  }

  html.gs-playing .bo-status__label {
    font-size: .6875rem;
    line-height: 1.3;
  }

  html.gs-playing .bo-status__value {
    font-size: 1.0625rem;
  }

  html.gs-playing .bo-guide {
    display: none;
  }

  html.gs-playing .bo-stage-area {
    min-height: 0;
    margin: 0;
  }

  html.gs-playing .bo-stage {
    width: min(100cqw, 100cqh * var(--bo-ratio, 1.8));
  }
}

/* タッチ操作ボタンはタッチ主体の端末だけに表示する */
.bo-pad {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: min(100%, 480px);
  margin: 0 auto 12px;
}

.bo-pad__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 60px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(96, 154, 214, 0.45);
  border-radius: var(--md-sys-shape-corner-medium);
  background: #13224a;
  color: #cfefff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.bo-pad__icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}


.bo-pad__btn.is-pressed {
  background: #1f3d7c;
  box-shadow: 0 0 0 2px rgba(63, 215, 255, 0.6), 0 0 16px rgba(63, 215, 255, 0.35);
}


@media (hover: none) and (pointer: coarse) {
  .bo-pad {
    display: grid;
  }
}


html.gs-playing .bo-pad {
  grid-area: pad;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 10px;
}

@media (hover: none) and (pointer: coarse) {
  html.gs-playing .game-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "bar . controls"
      "status status status"
      "stage stage stage"
      "pad pad pad"
      "guide guide guide";
  }

  html.gs-playing .bo-stage-area {
    min-height: 0;
  }

  html.gs-playing .bo-guide {
    font-size: .75rem;
  }

  @media (orientation: landscape) and (max-height: 500px) {
    html.gs-playing .game-panel {
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "bar status controls"
        "stage stage stage"
        "pad pad pad";
    }

    html.gs-playing .bo-pad {
      margin-bottom: 0;
    }

    html.gs-playing .bo-pad__btn {
      min-height: 44px;
    }
  }
}

/* 縦向きの盤面はHUD・操作パッドと同じ幅にし、各段を内容の高さで詰める。 */
@media (min-height: 501px), (orientation: portrait) {
  html.gs-playing .game-panel {
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-content: start;
  }

  html.gs-playing .bo-stage-area {
    align-items: flex-start;
    container-type: inline-size;
  }

  html.gs-playing .bo-stage {
    width: min(100cqw, 640px);
  }

  html.gs-playing .bo-guide {
    display: none;
  }
}

/* 戻るとHUDを上段にまとめ、共通操作は盤面・移動パッドの下へ置く。 */
@media (min-height: 501px), (orientation: portrait) {
  html.gs-playing .game-panel {
    grid-template-columns: 44px minmax(0, 586px);
    grid-template-areas:
      "bar status"
      "stage stage"
      "pad pad"
      "controls controls"
      "guide guide";
    justify-content: center;
  }

  html.gs-playing .bo-status {
    align-self: start;
  }

  html.gs-playing .bo-status__item {
    padding: 2px 4px;
  }

  html.gs-playing .game-panel .game-controls {
    justify-self: center;
    margin: 0;
  }
}

/* スコア・盤面・移動パッドの間に少し余裕を持たせる。 */
@media (min-height: 501px), (orientation: portrait) {
  html.gs-playing .bo-status,
  html.gs-playing .bo-stage-area {
    margin-bottom: 16px;
  }
}