/* そらぴこ つみあげ（/tsumiage）のページだけで使う見た目 */
/* 画面の高さに収まるよう、幅を高さから決める（PCで盤面が画面の下にはみ出さないように） */
.tsumiage-page { max-width: clamp(300px, calc((100svh - 360px) * .677), 460px); margin: 0 auto; padding-bottom: 2rem; }
.tsumiage-page .page-head { text-align: center; padding: 1rem 0 .2rem; }
.tsumiage-page .page-head h1 { font-size: clamp(1.5rem, 5vw, 1.9rem); margin: 0 0 .2em; }
.tsumiage-page .page-head p { margin: 0; color: var(--muted); font-size: .95rem; }

.tsu-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: .8rem 0 .6rem; }
.tsu-box { background: #fff; border: 3px solid var(--navy); border-radius: 14px; padding: 4px 8px; display: grid; justify-items: center; align-content: center; box-shadow: 0 3px 0 var(--navy); line-height: 1.3; min-height: 58px; }
.tsu-box small { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.tsu-box b { font-family: Fredoka, sans-serif; font-size: 1.4rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.tsu-lives { display: flex; gap: 2px; height: 24px; align-items: center; }
.tsu-lives svg { width: 20px; height: 20px; }
.tsu-box img { width: 32px; height: 32px; }

.tsu-stage { position: relative; }
.tsu-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 420 / 620; border-radius: var(--radius); touch-action: none; cursor: pointer; }
.tsu-stage canvas:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.tsu-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(43,47,85,.66); border-radius: var(--radius); }
.tsu-over[hidden] { display: none; }
.tsu-card { background: #FFFDF6; border: 3px solid var(--navy); border-radius: 18px; padding: 18px 16px; text-align: center; display: grid; gap: .6rem; justify-items: center; width: min(320px, 100%); box-shadow: 0 5px 0 var(--navy); }
.tsu-card h2 { margin: 0; font-size: 1.3rem; }
.tsu-card p { margin: 0; font-size: .85rem; line-height: 1.7; color: var(--muted); }
.tsu-score { font-family: Fredoka, sans-serif; font-size: 2.8rem; font-weight: 600; color: var(--navy); line-height: 1; }
.tsu-best { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
.tsu-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tsu-btns .btn { padding: .6rem 1.1rem; font-size: .95rem; }
.tsu-card button.btn { cursor: pointer; font: inherit; font-weight: 700; }
.tsu-card button.btn-primary { border: 0; }
.tsu-cast { display: flex; gap: 4px; justify-content: center; }
.tsu-cast img { width: 38px; height: 38px; object-fit: contain; }

.tsu-chain { list-style: none; margin: .7rem 0 0; padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; background: var(--navy); border-radius: 999px; }
.tsu-chain li { display: grid; place-items: center; flex: 0 0 auto; }
.tsu-chain img { width: 100%; height: 100%; }
.tsu-how { font-size: .88rem; color: var(--muted); margin-top: 1.2rem; }
.tsu-how h2 { font-size: 1.05rem; }
.tsu-how ul { padding-left: 1.2em; margin: .3em 0 1em; }

/* PC：盤面を左に大きく、スコアや説明を右の列に並べる。
   盤面の幅は画面の高さから決める（ヘッダーぶんを引いた高さに収まる幅） */
@media (min-width: 900px) {
  .tsumiage-page {
    max-width: 1080px;
    display: grid;
    grid-template-columns: auto minmax(280px, 360px);
    grid-template-areas: "stage head" "stage bar" "stage chain" "stage how";
    grid-template-rows: auto auto auto 1fr;
    justify-content: center;
    column-gap: 40px;
    align-items: start;
    padding-top: .5rem;
  }
  .tsu-stage { grid-area: stage; width: clamp(340px, calc((100svh - 170px) * .677), 560px); }
  .tsumiage-page .page-head { grid-area: head; text-align: left; padding-top: 0; }
  .tsumiage-page .page-head h1 { font-size: 2rem; }
  .tsu-bar { grid-area: bar; margin-top: 1rem; }
  .tsu-chain { grid-area: chain; margin-top: .8rem; }
  .tsu-how { grid-area: how; margin-top: 1.2rem; }
}