/* 1問ずつ答える画面と、みんなの%のお披露目 */
.play { position: relative; max-width: 560px; margin: 0 auto; }

.play-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.icon-btn {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--navy); border: var(--border);
  box-shadow: 0 3px 0 var(--navy); text-decoration: none;
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
.icon-btn svg { width: 20px; height: 20px; }
.play-room { min-width: 0; display: grid; line-height: 1.3; }
.play-room-title { font-family: var(--font-pop); font-size: 17px; }
.play-room-sub { font-size: 12px; font-weight: 700; color: var(--muted); }
.play-step {
  margin-left: auto; flex: none;
  padding: 3px 14px; border-radius: 999px;
  background: var(--white); border: var(--border);
  font-family: var(--font-pop); font-size: 20px; font-variant-numeric: tabular-nums;
}
.play-step small { font-size: 13px; color: var(--muted); }

.round-track { display: flex; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }
.round-track li {
  flex: 1; height: 12px; border-radius: 999px;
  background: var(--white); border: 2px solid var(--navy);
}
.round-track li.done { background: var(--pink); }
.round-track li.now { background: var(--pink-soft); }

.q-card {
  position: relative; padding: 20px 20px 20px;
  background: var(--white); border: var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}
.q-label {
  display: inline-block; padding: 1px 12px; border-radius: 999px;
  background: var(--pink); color: var(--white); border: 2px solid var(--navy);
  font-family: var(--font-pop); font-size: 14px; transform: rotate(-3deg);
}
.q-body {
  margin: 12px 0 0;
  font-family: var(--font-pop); font-weight: 400;
  font-size: clamp(23px, 6.4vw, 30px); line-height: 1.5;
  word-break: auto-phrase; text-wrap: pretty;
}
.verdict {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 14px 0 0; font-size: 14px; font-weight: 700; min-height: 32px;
}
.verdict .phrase { display: inline-block; }
.verdict b { font-family: var(--font-pop); font-weight: 400; font-size: 20px; color: var(--pink); }
.sticker {
  display: inline-block; padding: 3px 14px; border-radius: 999px;
  border: 2px solid var(--navy);
  font-family: var(--font-pop); font-size: 16px; transform: rotate(-4deg);
}
.sticker--major { background: var(--pink); color: var(--white); }
.sticker--minor { background: var(--navy); color: var(--white); }
.sticker--pending { background: var(--pink-soft); color: var(--navy); }

.choices { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.choice {
  width: 100%; min-height: 62px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 12px; row-gap: 8px;
  padding: 12px 16px 12px 12px; text-align: left;
  background: var(--white); border: var(--border); border-radius: var(--r-lg);
  box-shadow: 0 4px 0 var(--navy); cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1.45;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.2s ease;
}
.choice:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.choice-label { word-break: auto-phrase; text-wrap: pretty; }
.choice:disabled { cursor: default; color: var(--navy); }
@media (hover: hover) {
  .choice:not(:disabled):hover { background: var(--pink-tint); }
}

.hole {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--navy); background: var(--cream);
  box-shadow: inset 0 4px 0 rgba(21, 78, 127, 0.18);
}
.hole.has-ball, .drop-ball {
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85) 0 16%, transparent 18%), var(--pink);
  box-shadow: none;
}
.drop-ball {
  position: absolute; left: 0; top: 0; z-index: 10;
  border-radius: 50%; border: 2px solid var(--navy); pointer-events: none;
}

.choice-pct {
  display: none; font-family: var(--font-pop); font-size: 21px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.choice-pct small { font-size: 13px; }
.choice-bar {
  display: none; grid-column: 2 / 4; height: 16px;
  border-radius: 999px; background: var(--navy-tint); overflow: hidden;
}
.choice-bar i {
  display: block; width: 0; height: 100%; border-radius: 999px;
  background:
    radial-gradient(circle at 8px 8px, rgba(255, 255, 255, 0.38) 0 3.5px, transparent 4px) 0 0 / 16px 16px,
    var(--navy);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.choices.is-revealed .choice-pct, .choices.is-revealed .choice-bar { display: block; }
.choices.is-pending .choice-pct, .choices.is-pending .choice-bar { display: none; }
.choices.is-revealed .choice { box-shadow: none; transform: none; }
.choice.is-mine { background: var(--pink-tint); box-shadow: 0 4px 0 var(--pink) !important; }
.choice.is-mine .choice-pct { color: var(--pink-deep); }
.choice.is-mine .choice-bar i {
  background:
    radial-gradient(circle at 8px 8px, rgba(255, 255, 255, 0.45) 0 3.5px, transparent 4px) 0 0 / 16px 16px,
    var(--pink);
}
.mine-tag {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px;
  background: var(--pink); color: var(--white);
  font-size: 11px; font-weight: 900; vertical-align: 2px;
}

.pending-card {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--white); border: 2px dashed var(--navy); border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
}
.note { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--pink-deep); }

.play-cta {
  position: sticky; z-index: 4;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  margin-top: 24px;
}