@charset "UTF-8";
/* ============================================
   予選ページ専用スタイル
   16:9(SE)は左にカウンタ、縦長はカードの上にカウンタ
   ============================================ */

:root{
  --side-w:80px;      /* カウンタ列の幅 */
  --gap:6px;          /* 基本の間隔 */
  --gap-col:14px;     /* カードの左右の間隔 */
  --gap-row:6px;      /* カードの上下の間隔 */
  --text-h:56px;      /* 問いかけ+注意書きに見込む高さ */

  /* カード1枚の一辺。横で決まる値と縦で決まる値の、小さいほうを採る */
  --right-w:calc(min(100vw, var(--max-w)) - var(--pad-h) * 2 - var(--side-w) - 10px);
  --avail-h:calc(100dvh - var(--header-h) - var(--ad-h) - var(--pad-v) * 2 - var(--text-h) - 6px);
  --grid-h:calc(var(--cell) * 3 + var(--gap-row) * 2);
  --cell:min(
    calc((var(--right-w) - var(--gap-col)) / 2),
    calc((var(--avail-h) - var(--gap-row) * 2) / 3)
  );
}

body{ overflow:hidden; }

.page{
  height:calc(100dvh - var(--header-h) - var(--ad-h));
  margin-top:var(--header-h);
  max-width:var(--max-w);
  margin-inline:auto;
  padding:var(--pad-v) var(--pad-h);
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ---- 上段。テキストと「はじめから」 ---- */
.texts{
  flex:none;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.texts .lead{ flex:1; min-width:0; }

.ask{
  font-size:clamp(14px, 4vw, 19px);
  font-weight:600;
  margin:0;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.note{
  font-size:clamp(11px, 3.1vw, 15px);
  color:var(--muted);
  margin:4px 0 0;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.reset-btn{
  flex:none;
  align-self:center;
  font:inherit;
  font-size:clamp(10px, 2.9vw, 14px);
  color:var(--muted);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  white-space:nowrap;
}

/* ---- 下段。カウンタ列とカード ---- */
.row{
  display:flex;
  gap:10px;
  flex:1;
  min-height:0;
}

.side{
  width:var(--side-w);
  flex:none;
  height:var(--grid-h);
  align-self:center;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}
.meter{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:9px;
  padding:5px 6px;
}
.meter .label{
  display:block;
  font-size:clamp(9px, 2.4vw, 11px);
  color:var(--muted);
  white-space:nowrap;
}
.meter .value{
  font-size:clamp(13px, 3.7vw, 18px);
  font-variant-numeric:tabular-nums;
}
.meter .value small{
  font-size:clamp(10px, 2.8vw, 13px);
  color:var(--muted);
}

/* ---- カードの並び ---- */
.cards{
  flex:1;
  min-width:0;
  height:100%;
}
.grid{
  list-style:none;
  margin:0;
  padding:0;
  height:100%;
  display:grid;
  grid-template-columns:var(--cell) var(--cell);
  grid-auto-rows:var(--cell);
  column-gap:var(--gap-col);
  row-gap:var(--gap-row);
  justify-content:center;
  align-content:center;
}
.grid li{ min-width:0; min-height:0; }

/* 「次へ」は常に右下 */
.cell-next{ grid-column:2; grid-row:3; }
.next-btn{
  width:100%;
  height:100%;
  font:inherit;
  font-size:clamp(14px, 4vw, 19px);
  font-weight:600;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:12px;
  padding:0;
  cursor:pointer;
}

/* ---- カード1枚 ---- */
.card{
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  position:relative;
}
.card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.photo{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-origin:border-box;   /* 枠の下まで画像を敷く */
  background-color:var(--line);
  border-radius:12px;
  border:2px solid transparent;
  filter:brightness(.9);
  transition:filter .15s, border-color .15s;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.card input:checked + .photo{
  filter:brightness(1);
  border-color:var(--accent);
}

/* 名前を画像に重ねる */
.name{
  width:100%;
  margin:0;
  padding:14px 3px 5px;
  /* カードの大きさに連動させる */
  font-size:clamp(9px, calc(var(--cell) / 11), 18px);
  font-weight:600;
  color:#fff;
  text-align:center;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  background:linear-gradient(transparent, rgba(0,0,0,.6));
}

/* ---- 縦長の端末。カウンタをカードの上に横並びで置き、カードを幅いっぱいに ---- */
@media (max-aspect-ratio: 3/5){
  :root{
    --meter-h:50px;    /* カウンタ1段ぶん */
    --right-w:calc(min(100vw, var(--max-w)) - var(--pad-h) * 2);
    --avail-h:calc(100dvh - var(--header-h) - var(--ad-h) - var(--pad-v) * 2
                   - var(--text-h) - var(--meter-h) - 12px);
  }
  .row{
    flex-direction:column;
    gap:6px;
  }
  .side{
    width:auto;
    height:auto;
    align-self:auto;
    flex-direction:row;
    justify-content:flex-start;
    gap:var(--gap);
  }
  .side .meter{ flex:none; min-width:96px; }
}

/* 選択中の枠線を黄色にする */
.card input:checked + .photo{
  border-color:#ffc400;
  box-shadow:0 0 0 1px rgba(255,255,255,.7), 0 2px 10px rgba(255,196,0,.45);
}