/* =========================================================
   SECRET BREAKER
   ========================================================= */

/* ---------- LIGHT ---------- */
html[data-theme="white"] .breaker-page,
html[data-theme="pink"] .breaker-page {
  --gm-bg: #ded4ce;
  --gm-bg-2: #cbbdb7;
  --gm-panel: #f7f0eb;
  --gm-panel-2: #e8ddd7;
  --gm-ink: #211619;
  --gm-muted: #705d62;
  --gm-line: rgba(65,25,34,.20);
  --gm-line-strong: rgba(86,24,39,.42);
  --gm-red: #a80d31;
  --gm-red-bright: #dc244c;
  --gm-red-dark: #5e081c;
  --gm-shadow: 0 24px 58px rgba(54,17,27,.16);
}

/* ---------- DARK ---------- */
html[data-theme="black"] .breaker-page,
html[data-theme="aqua"] .breaker-page {
  --gm-bg: #070607;
  --gm-bg-2: #0f0b0d;
  --gm-panel: #171013;
  --gm-panel-2: #211419;
  --gm-ink: #f7edef;
  --gm-muted: #b7a4a8;
  --gm-line: rgba(255,105,135,.20);
  --gm-line-strong: rgba(255,105,135,.42);
  --gm-red: #e32149;
  --gm-red-bright: #ff4f70;
  --gm-red-dark: #7e0c28;
  --gm-shadow: 0 24px 58px rgba(0,0,0,.45);
}

.breaker-page {
  position: relative;
  isolation: isolate;
  width: min(980px, calc(100% - 24px));
  margin: 0 auto;
  padding: 28px 0 84px;
  color: var(--gm-ink);
}

.breaker-page,
.breaker-page * {
  box-sizing: border-box;
}

.breaker-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(227,33,73,.13), transparent 28rem),
    linear-gradient(155deg,var(--gm-bg),var(--gm-bg-2));
}

.breaker-eyebrow {
  margin: 0 0 7px;
  color: var(--gm-red-bright);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .22em;
}

.breaker-hero {
  padding: 28px 30px;
  border: 1px solid var(--gm-line);
  border-left: 4px solid var(--gm-red);
  background:
    linear-gradient(145deg, rgba(227,33,73,.06), transparent 55%),
    var(--gm-panel);
  box-shadow: var(--gm-shadow);
}

.breaker-hero h1 {
  margin: 0;
  color: var(--gm-ink);
  font-family: "Noto Serif JP","Yu Mincho",serif;
  font-size: clamp(2rem,5vw,3.6rem);
  font-weight: 900;
  letter-spacing: -.05em;
}

.breaker-hero > p:last-child {
  margin: 10px 0 0;
  color: var(--gm-muted);
  font-size: .8rem;
  line-height: 1.8;
}

.breaker-empty {
  margin-top: 14px;
  padding: 34px 20px;
  border: 1px solid var(--gm-line);
  background: var(--gm-panel);
  color: var(--gm-muted);
  text-align: center;
}

.breaker-shell {
  width: min(100%, 600px);
  margin: 14px auto 0;
  overflow: hidden;
  border: 1px solid var(--gm-line-strong);
  background: var(--gm-panel);
  box-shadow: var(--gm-shadow);
}

.breaker-hud {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto auto;
  gap: 10px 18px;
  align-items: center;
  min-height: 48px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gm-line);
  background: var(--gm-panel-2);
  color: var(--gm-muted);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.breaker-hud b {
  margin-left: 4px;
  color: var(--gm-red-bright);
}

.breaker-hud__title {
  overflow: hidden;
  color: var(--gm-ink);
  font-size: .74rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breaker-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: #080607;
}

.breaker-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(227,33,73,.20), transparent 28%),
    linear-gradient(145deg,#32101b,#0a0608);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.breaker-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 18% 82%, rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28));
  pointer-events: none;
}

#breakerCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.breaker-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.breaker-message {
  max-width: calc(100% - 36px);
  padding: 13px 17px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.76);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.7;
  text-align: center;
  backdrop-filter: blur(5px);
}

.breaker-items {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  padding: 1px;
  border-top: 1px solid var(--gm-line);
  background: var(--gm-line);
}

.breaker-items span {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px;
  background: var(--gm-panel);
  color: var(--gm-muted);
  font-size: .65rem;
  font-weight: 800;
}

.breaker-items i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.breaker-items .is-multi i { background: #ffd43b; }
.breaker-items .is-big i   { background: #ff3b4f; }
.breaker-items .is-wide i  { background: #38a8ff; }
.breaker-items .is-power i { background: #35d06f; }

.breaker-actions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
  padding: 10px;
  border-top: 1px solid var(--gm-line);
}

.breaker-actions button {
  min-height: 46px;
  border: 1px solid var(--gm-line);
  background: var(--gm-panel-2);
  color: var(--gm-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}

.breaker-actions .is-primary,
#breakerNext {
  border-color: var(--gm-red-bright);
  background: linear-gradient(135deg,var(--gm-red-dark),var(--gm-red),var(--gm-red-bright));
  color: #fff;
}

.breaker-stage-select {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--gm-line);
  background: var(--gm-panel);
}

.breaker-stage-select__head h2 {
  margin: 0;
  color: var(--gm-ink);
  font-family: "Noto Serif JP","Yu Mincho",serif;
  font-size: 1.4rem;
}

.breaker-stage-buttons {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px;
  margin-top: 14px;
}

.breaker-stage-buttons button {
  min-height: 56px;
  border: 1px solid var(--gm-line);
  background: var(--gm-panel-2);
  color: var(--gm-ink);
  font: inherit;
  font-size: .86rem;
  font-weight: 900;
  cursor: pointer;
}

.breaker-stage-buttons button small {
  display: block;
  margin-bottom: 2px;
  color: var(--gm-muted);
  font-size: .46rem;
  letter-spacing: .12em;
}

.breaker-stage-buttons button.is-current {
  border-color: var(--gm-red);
  background: var(--gm-red);
  color: #fff;
}

.breaker-stage-buttons button.is-locked {
  opacity: .36;
  cursor: not-allowed;
}

.breaker-stage-buttons button.is-locked::after {
  content: " LOCK";
  display: block;
  margin-top: 2px;
  font-size: .43rem;
}

@media (max-width: 700px) {
  .breaker-page {
    width: 100%;
    padding: 14px 10px 72px;
  }

  .breaker-hero {
    padding: 23px 19px;
  }

  .breaker-hud {
    grid-template-columns: 1fr 1fr;
    gap: 5px 10px;
  }

  .breaker-hud__title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .breaker-stage {
    aspect-ratio: 5 / 6;
  }

  .breaker-items {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .breaker-stage-buttons {
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
}

@media (max-width: 430px) {
  .breaker-stage-select {
    padding: 16px 10px;
  }

  .breaker-stage-buttons {
    gap: 5px;
  }

  .breaker-stage-buttons button {
    min-height: 52px;
    padding: 4px;
    font-size: .75rem;
  }
}


/* =========================================================
   GAME BOARD RATIO
   管理画面・PC・スマホ共通で 5:6。
   背景画像は contain で全体表示。
   本番画像は 5:6（例: 1000x1200 / 1250x1500）推奨。
   ========================================================= */

/* ゲーム盤面そのものは視認性優先で共通の暗色 */
.breaker-stage {
  background-color: #080607;
}


/* =========================================================
   CLEAR BAR
   クリア時は画像を隠さず、盤面下部に控えめに表示
   ========================================================= */
.breaker-clearbar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.58);
  color: #fff;
  backdrop-filter: blur(5px);
}

.breaker-clearbar[hidden] {
  display: none !important;
}

.breaker-clearbar__text {
  min-width: 0;
}

.breaker-clearbar__text small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,.58);
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.breaker-clearbar__text strong {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.breaker-clearbar__next {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  font: inherit;
  font-size: .62rem;
  font-weight: 900;
  cursor: pointer;
}

.breaker-clearbar__next:hover {
  background: rgba(255,255,255,.14);
}

@media (max-width: 520px) {
  .breaker-clearbar {
    left: 7px;
    right: 7px;
    bottom: 7px;
    min-height: 38px;
    padding: 6px 7px 6px 9px;
  }

  .breaker-clearbar__text strong {
    font-size: .66rem;
  }

  .breaker-clearbar__next {
    min-height: 28px;
    padding: 4px 7px;
    font-size: .58rem;
  }
}


.breaker-items .is-fever i {
  background: linear-gradient(
    135deg,
    #ff1744,
    #ff9100,
    #ffea00,
    #00e676,
    #00b0ff,
    #7c4dff,
    #e040fb
  );
  box-shadow: 0 0 10px rgba(255,255,255,.8);
}


/* =========================================================
   CLEAR VIDEO
   クリア時のみ背景画像の上に表示
   ========================================================= */
.breaker-clear-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080607;
  pointer-events: none;
}

.breaker-clear-video.is-visible {
  display: block;
}

/* クリア動画表示中はCanvasより前面に置く */
.breaker-stage .breaker-clear-video.is-visible {
  z-index: 3;
}


.breaker-bonus {
  margin-top:18px;
  padding:24px;
  border:1px solid var(--gm-line-strong);
  background:var(--gm-panel);
  box-shadow:var(--gm-shadow);
}
.breaker-bonus[hidden],
.breaker-bonus-modal[hidden] { display:none !important; }

.breaker-bonus__head h2 {
  margin:0;
  color:var(--gm-ink);
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:clamp(1.45rem,4vw,2.2rem);
  font-weight:900;
}
.breaker-bonus__head > p:last-child {
  margin:9px 0 0;
  color:var(--gm-muted);
  font-size:.74rem;
  line-height:1.8;
}
.breaker-bonus__grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}
.breaker-bonus__photo {
  position:relative;
  overflow:hidden;
  aspect-ratio:5/6;
  padding:0;
  border:1px solid var(--gm-line);
  background:#080607;
  cursor:pointer;
}
.breaker-bonus__photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.breaker-bonus__photo span {
  position:absolute;
  left:5px;
  bottom:5px;
  padding:3px 5px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:.48rem;
  font-weight:900;
}
.breaker-bonus__ad {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  margin-top:18px;
  padding:18px 18px 18px 22px;
  border:1px solid var(--gm-line-strong);
  border-left:4px solid var(--gm-red);
  background:var(--gm-panel-2);
}
.breaker-bonus__ad-label {
  position:absolute;
  left:8px;
  top:7px;
  color:var(--gm-red-bright);
  font-size:.45rem;
  font-weight:900;
}
.breaker-bonus__ad-copy small {
  display:block;
  margin-bottom:4px;
  color:var(--gm-muted);
  font-size:.46rem;
  font-weight:900;
}
.breaker-bonus__ad-copy strong {
  display:block;
  color:var(--gm-ink);
  font-size:.92rem;
  font-weight:900;
}
.breaker-bonus__ad-copy p {
  margin:5px 0 0;
  color:var(--gm-muted);
  font-size:.68rem;
}
.breaker-bonus__ad-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 13px;
  border:1px solid var(--gm-red-bright);
  background:var(--gm-red);
  color:#fff;
  font-size:.7rem;
  font-weight:900;
  text-decoration:none;
}
.breaker-bonus__actions {
  display:flex;
  justify-content:center;
  margin-top:14px;
}
.breaker-bonus__actions button {
  min-height:40px;
  padding:7px 14px;
  border:1px solid var(--gm-line);
  background:var(--gm-panel-2);
  color:var(--gm-ink);
  font:inherit;
  font-size:.68rem;
  font-weight:900;
  cursor:pointer;
}
.breaker-bonus-modal {
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.88);
}
.breaker-bonus-modal__inner {
  width:min(92vw,620px);
  max-height:90vh;
  text-align:center;
}
.breaker-bonus-modal__inner img {
  display:block;
  width:100%;
  max-height:84vh;
  object-fit:contain;
}
.breaker-bonus-modal__inner span {
  display:inline-block;
  margin-top:7px;
  color:rgba(255,255,255,.72);
  font-size:.62rem;
  font-weight:900;
}
.breaker-bonus-modal__close {
  position:fixed;
  right:14px;
  top:14px;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:1.35rem;
  cursor:pointer;
}
html.breaker-modal-open { overflow:hidden; }

@media (max-width:700px) {
  .breaker-bonus { padding:18px 12px; }
  .breaker-bonus__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .breaker-bonus__ad { grid-template-columns:1fr; padding:20px 14px 14px; }
  .breaker-bonus__ad-link { width:100%; }
}