/* 4種プレーヤー — イメージ図（紺バー × 紙地 × 種ごとの操作）が正 */
body.play-page {
  --ink: #16324d;
  --cream: #f3efe6;
  --teal: #1a7a86;
  --coral: #ef8577;
  --coral-dark: #d96c5e;
  margin: 0;
  background: #f4efe6;
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.play-page .site-header,
body.play-page .site-header-spacer,
body.play-page .nr-paid-notice,
body.play-page .nr-engage,
body.play-page #nrEngagement,
body.play-page .nr-xp,
body.play-page [data-nr-asset="engagement"],
body.play-page .v3-tabbar {
  display: none !important;
}
[hidden] { display: none !important; }

.play-nav {
  background: #16324d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 56px;
  font-weight: 800;
}
.play-nav-brand {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: .01em;
}
.play-nav-brand span {
  font-weight: 600;
  opacity: .85;
  margin-left: 8px;
  font-size: 13px;
}
.play-nav-back {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  opacity: .85;
}

.play-start {
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: #e8897a;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  padding: 12px 40px;
  cursor: pointer;
}

.play {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px 96px;
}

.play-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 12px 0 28px;
  text-align: center;
}
.play-hero h1 {
  font-size: clamp(36px, 7vw, 56px);
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 0;
}
.play-sub {
  margin: 6px 0 0;
  color: #6b7780;
  font-size: 15px;
}
.play-sheep { position: relative; flex-shrink: 0; }
.play-sheep img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
}
.play-sheep-say {
  position: absolute;
  top: -8px;
  right: -18px;
  background: #fff;
  border: 2px solid #16324d;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.play-kinds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 8px 0 20px;
}
.play-kind {
  background: #fff;
  border: 0;
  border-radius: 22px;
  padding: 36px 12px 28px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(22,50,77,.08);
  color: var(--ink);
}
.play-kind:hover { transform: translateY(-2px); }
.play-kind-dot {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #1a7a86;
  color: #fff;
}
.play-kind-dot svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.play-kind strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
}
.play-fine { text-align: center; color: #7b8790; }

.play-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.play-kind-label { margin-left: auto; font-weight: 800; color: var(--teal); }
.play-progress { font-weight: 800; font-size: 14px; }
.play-bar {
  height: 8px;
  background: #e4ddd0;
  border-radius: 99px;
  overflow: hidden;
  margin: 8px 0 22px;
}
.play-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--teal);
  border-radius: 99px;
}

/* 聞く: 波形 + 絵カード4枚横並び */
.kiku-wave {
  position: relative;
  margin: 8px 0 20px;
}
.kiku-wave img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.kiku-play {
  position: absolute;
  left: 6%;
  top: 50%;
  width: 18%;
  max-width: 96px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.kiku-q {
  font-size: 20px;
  font-weight: 800;
  margin: 4px 0 14px;
}
.kiku-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.kiku-card {
  background: #fff;
  border: 2px solid #ece6db;
  border-radius: 16px;
  padding: 16px 8px 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.kiku-card .ico-img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 8px;
}
.kiku-card .lab { display: block; }
.kiku-card.on, .kiku-card.ok {
  border-color: #7fd3d6;
  background: #eef9f8;
  box-shadow: 0 0 0 4px rgba(26,122,134,.12);
}
.kiku-card.ng { border-color: var(--coral); background: #fdeae6; }

/* 読む: 紙の文 + 下線穴 + 横チップ */
.yomu-paper {
  background: #faf7f0;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(22,50,77,.08);
  font-size: 22px;
  line-height: 1.7;
  font-weight: 700;
  margin-bottom: 16px;
}
.yomu-blank {
  display: inline-block;
  min-width: 88px;
  border-bottom: 3px solid var(--coral);
  text-align: center;
  color: var(--ink);
  padding: 0 8px;
  background: #fff;
  border-radius: 8px 8px 0 0;
}
.yomu-ja { font-size: 14px; color: #7b8790; font-weight: 500; margin-top: 14px; }
.yomu-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.yomu-chip {
  border: 0;
  background: #efe9de;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
}
.yomu-chip.ok { background: #d7efe4; }
.yomu-chip.ng { background: #fde0da; }

/* 話す: 日本語大 + タイル + タイプ */
.hanasu-ja {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  margin: 8px 0 10px;
}
.hanasu-audio {
  display: flex;
  margin: 0 auto 16px;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--teal);
  font-weight: 800;
  cursor: pointer;
}
.hanasu-audio::before { content: "♪ "; }
.hanasu-well {
  background: #e6dfd3;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 16px;
}
.hanasu-tray:empty { display: none; }
.hanasu-tray {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}
.hanasu-tray:not(:empty) { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #d5cdbf; }
.hanasu-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  justify-content: center;
}
.hanasu-tile {
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: 16px 22px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  color: #1a7a86;
  box-shadow: 0 1px 0 rgba(22,50,77,.06);
}
.hanasu-type {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 17px;
  font-family: inherit;
  margin-bottom: 8px;
  background: #fff;
}
.hanasu-check, .play-next {
  display: block;
  width: min(320px, 100%);
  margin: 20px auto 0;
  border: 0;
  border-radius: 999px;
  background: #e8897a;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.play-next[hidden],
.hanasu-check[hidden] { display: none !important; }

/* 覚える: 中央カード + 東西南北 */
.obo-wrap {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
  align-items: center;
  justify-items: stretch;
  max-width: 640px;
  margin: 0 auto;
}
.obo-card {
  grid-column: 2;
  grid-row: 2;
  background: #f7f3ea;
  border-radius: 24px;
  padding: 36px 16px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(22,50,77,.12);
}
.obo-word { font-size: 32px; font-weight: 900; letter-spacing: .02em; }
.obo-ipa { color: #7b8790; font-size: 13px; margin-top: 6px; }
.obo-speak {
  margin-top: 12px;
  border: 0;
  background: var(--teal);
  color: #fff;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-weight: 800;
}
.obo-tile {
  background: #f7f3ea;
  border: 0;
  border-radius: 16px;
  padding: 16px 10px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(22,50,77,.08);
  color: var(--ink);
}
.obo-tile.n { grid-column: 2; grid-row: 1; }
.obo-tile.s { grid-column: 2; grid-row: 3; }
.obo-tile.w { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; min-height: 140px; }
.obo-tile.e { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; min-height: 140px; }
.obo-tile.ok { box-shadow: 0 0 0 3px #1a7a86, 0 8px 18px rgba(26,122,134,.25); }
.obo-tile.ng { background: #fdeae6; }

.play-feedback {
  margin-top: 16px;
  text-align: center;
  font-weight: 800;
}
.play-done { text-align: center; padding-top: 28px; }
.play-done h2 { font-size: 28px; }
.play-link { display: block; margin-top: 16px; color: var(--teal); font-weight: 800; }

@media (max-width: 720px) {
  .play-kinds, .kiku-grid { grid-template-columns: 1fr 1fr; }
  .play-hero { flex-direction: column; gap: 8px; }
  .obo-wrap { grid-template-columns: 1fr; }
  .obo-tile.n, .obo-tile.s, .obo-tile.w, .obo-tile.e, .obo-card {
    grid-column: 1;
    grid-row: auto;
  }
}