* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #10151f;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS Mincho", "Noto Serif JP", serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
}

#battlefield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hidden { display: none !important; }

/* ===== HUD ===== */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  pointer-events: none;
  /* 左上の「← トップへ」ボタンと重ならないよう下げる */
  padding: calc(44px + env(safe-area-inset-top)) 8px 0;
}

.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hud-left {
  color: #e8dcc0;
  font-size: 12px;
  text-align: left;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

#hudCombo {
  color: #ffd76a;
  min-height: 12px;
}

.hud-dots {
  display: flex;
  gap: 5px;
  margin: 2px 0;
}

.hd-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a4a68;
  border: 1px solid #5a6a88;
}

.hd-dot.done {
  background: #c22b2b;
  border-color: #e07b7b;
}

.hd-dot.cur {
  background: #ffd76a;
  border-color: #fff;
  box-shadow: 0 0 7px rgba(255,215,106,.9);
}

#hudTimer {
  font-size: 27px;
  font-weight: 800;
  color: #ffd76a;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  min-width: 58px;
  text-align: center;
}

#hudTimer.danger {
  color: #ff5b5b;
  animation: blink .5s step-end infinite;
}

@keyframes blink { 50% { opacity: .35; } }

.hud-right {
  text-align: right;
  line-height: 1.4;
}

#hudScore {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

#hudHearts {
  color: #e04545;
  font-size: 14px;
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

#hudHearts .off { color: #4f4242; }

#promptCard {
  margin: 6px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(10,12,18,.88);
  border: 1px solid #d8b46a;
  border-radius: 999px;
  padding: 5px 16px;
  width: fit-content;
  max-width: calc(100% - 16px);
  box-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.promptLabel {
  font-size: 10px;
  color: #ffb4b4;
  letter-spacing: .2em;
  border: 1px solid #c22b2b;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

#promptKanji {
  font-size: 48px; /* PCでは大きく表示（お題ワード） */
  font-weight: 900;
  color: #f5ecd9;
  line-height: 1;
}

#promptReading { font-size: 13px; color: #aab6cc; }
.promptAction { font-size: 13px; color: #ffd76a; white-space: nowrap; }

/* ===== Mute ===== */
.lang-select {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 60;
  background: rgba(20, 26, 38, 0.85);
  color: #e8dcc0;
  border: 1px solid #3a4a68;
  border-radius: 9px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.lang-select option { background: #141a26; color: #e8dcc0; }

#muteBtn {
  position: fixed;
  right: calc(8px + env(safe-area-inset-right));
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #3a4a68;
  background: rgba(20,26,38,.85);
  color: #e8dcc0;
  font-size: 18px;
  cursor: pointer;
}

#pauseBtn {
  position: fixed;
  right: calc(8px + env(safe-area-inset-right));
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #3a4a68;
  background: rgba(20, 26, 38, 0.85);
  color: #e8dcc0;
  font-size: 17px;
  cursor: pointer;
}

#pauseBtn.hidden { display: none; }

/* ===== 中断（一時停止）画面 ===== */
.pause-panel {
  width: min(360px, 100%);
  padding: 26px 20px;
}

.pause-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.35em;
  color: #ffd76a;
  margin-bottom: 6px;
}

.pause-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #f0e6cf;
  border: 1px solid #3a4a68;
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #d8b46a;
}

/* ===== Overlays ===== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  background: rgba(8,10,16,.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
}

#titleScreen {
  background-color: rgba(8,10,16,.56);
}

#introScreen {
  padding: 0;
  background-color: rgba(8,10,16,.35);
  background-size: cover;
  background-position: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
}

.intro-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.intro-bottom {
  border-radius: 16px;
  padding: 18px 14px 12px;
  max-height: 72%;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10,12,18,0.58), rgba(10,12,18,0.96));
  border: 1px solid rgba(216,180,106,.45);
  box-shadow: 0 8px 34px rgba(0,0,0,.5);
}

.intro-cry {
  color: #ffd76a;
  font-size: clamp(18px, 4.6vw, 26px);
  font-weight: 800;
  letter-spacing: .1em;
  margin: 2px 0 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
}

.intro-bottom .btn {
  margin: 10px 5px 0;
}

.panel {
  width: min(620px, 100%);
  margin: auto;
  background: linear-gradient(#1c2433, #141a26);
  border: 1px solid #d8b46a;
  border-radius: 14px;
  box-shadow: 0 12px 44px rgba(0,0,0,.55);
  padding: 24px 22px;
  text-align: center;
  color: #f0e6cf;
}

.flag-banner {
  position: relative;
  display: inline-block;
  background: #0c0f16;
  border: 2px solid #d8b46a;
  border-radius: 8px;
  padding: 6px 22px 10px;
}

.flag-banner .sun {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c22b2b;
}

.flag-kanji {
  font-size: 52px;
  font-weight: 900;
  color: #f5ecd9;
  line-height: 1.15;
}

.flag-banner.small .flag-kanji { font-size: 40px; }
.flag-banner.small .sun { width: 16px; height: 16px; top: 10px; right: 10px; }

.game-title {
  font-size: clamp(30px, 7vw, 46px);
  margin: 12px 0 2px;
  letter-spacing: .08em;
}

.game-sub {
  color: #d8b46a;
  letter-spacing: .4em;
  margin-bottom: 12px;
  font-size: 14px;
}

.best-line {
  color: #aab6cc;
  font-size: 13px;
  margin: 4px 0;
}

.howto {
  margin: 12px auto 4px;
  max-width: 460px;
  border-top: 1px solid #3a4a68;
  border-bottom: 1px solid #3a4a68;
  padding: 10px 4px;
}

.howto p { margin: 4px 0; font-size: 14px; color: #cdc3aa; line-height: 1.55; }
.em-red { color: #ff6b6b; font-weight: 700; }
.em-gold { color: #ffd76a; font-weight: 700; }

.member-title {
  margin: 16px 0 8px;
  color: #d8b46a;
  letter-spacing: .2em;
  font-size: 13px;
}

.member-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.member-card {
  background: #222c40;
  border: 1px solid #3a4a68;
  border-radius: 10px;
  padding: 13px 6px 11px;
  color: #f0e6cf;
  cursor: pointer;
  font-family: inherit;
  transition: transform .08s, border-color .15s;
}

.member-card:hover { border-color: #d8b46a; }
.member-card:active { transform: scale(.94); }

.m-name { display: block; font-size: 17px; font-weight: 700; }
.m-alias { display: block; font-size: 11px; color: #ffb4b4; margin: 3px 0; }
.m-hearts { display: block; color: #e04545; letter-spacing: 2px; font-size: 13px; }
.m-desc { display: block; font-size: 10.5px; color: #aab6cc; margin-top: 7px; line-height: 1.4; }

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .15em;
  border-radius: 999px;
  padding: 13px 38px;
  margin-top: 14px;
  cursor: pointer;
  transition: transform .08s, filter .15s;
}

.btn:active { transform: scale(.95); }

.btn-primary {
  background: linear-gradient(#c22b2b, #8e1d1d);
  color: #fff;
  border: 1px solid #e07b7b;
  box-shadow: 0 4px 16px rgba(150,30,30,.45);
}

.btn-primary:hover { filter: brightness(1.12); }

.btn-voice {
  background: rgba(255,255,255,.05);
  color: #ffd76a;
  border: 1px solid #d8b46a;
  font-size: 14px;
  padding: 10px 20px;
  box-shadow: none;
}

.btn-voice:hover {
  background: rgba(255, 215, 106, 0.12);
}

.chapter-name {
  color: #d8b46a;
  letter-spacing: .35em;
  font-size: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
}

.intro-title {
  font-size: clamp(22px, 5.5vw, 34px);
  margin: 8px 0;
  letter-spacing: .08em;
  color: #f5ecd9;
  text-shadow: 0 2px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.85);
}

.intro-line {
  color: #cdc3aa;
  font-size: 14px;
  line-height: 1.8;
  margin: 6px auto 2px;
  max-width: 440px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

.clear-title,
.victory-title {
  color: #ffd76a;
  font-size: clamp(22px, 5.5vw, 32px);
  letter-spacing: .1em;
}

.gameover-title {
  color: #ff6b6b;
  font-size: clamp(24px, 6vw, 36px);
  letter-spacing: .08em;
}

.gameover-line {
  color: #cdc3aa;
  font-size: 14px;
  line-height: 1.8;
  margin: 10px 0 4px;
}

.clear-breakdown {
  color: #cdc3aa;
  font-size: 14px;
  line-height: 2;
  margin: 12px 0;
}

.clear-breakdown b { color: #ffd76a; }

.clear-total {
  font-size: 21px;
  color: #fff;
  margin: 8px 0;
  font-weight: 700;
}

.result-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px auto 4px;
}

.rank-label {
  font-size: 12px;
  color: #aab6cc;
  letter-spacing: .2em;
}

.rank-name {
  font-size: 20px;
  font-weight: 800;
  color: #ffd76a;
  letter-spacing: .12em;
  border: 1px solid #d8b46a;
  border-radius: 999px;
  padding: 3px 18px;
  background: rgba(255,215,106,.08);
  white-space: nowrap;
}

.result-meta {
  color: #cdc3aa;
  font-size: 13px;
  margin: 2px 0 8px;
}

.result-next {
  color: #d8b46a;
  font-size: 13px;
  margin: 2px 0 6px;
  letter-spacing: .05em;
}

/* ===== 道筋 (roadmap) ===== */
.roadmap-block {
  margin: 12px auto 2px;
  max-width: 480px;
}

.roadmap-label {
  color: #d8b46a;
  letter-spacing: .25em;
  font-size: 12px;
  margin-bottom: 8px;
}

.roadmap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.roadmap-sm {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 10px auto 2px;
}

.rm-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 44px;
}

.rm-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222c40;
  border: 1.5px solid #3a4a68;
  color: #aab6cc;
  font-size: 12px;
  font-weight: 700;
}

.rm-node.done .rm-dot {
  background: #7d1f1f;
  border-color: #e07b7b;
  color: #ffd9d9;
}

.rm-node.cur .rm-dot {
  background: #ffd76a;
  border-color: #fff;
  color: #4a3300;
  box-shadow: 0 0 10px rgba(255,215,106,.8);
}

.rm-name {
  font-size: 9.5px;
  color: #aab6cc;
  white-space: nowrap;
}

.rm-link {
  flex: 1;
  height: 2px;
  background: #3a4a68;
  margin-top: 13px;
  min-width: 8px;
}

.rm-link.done {
  background: #c22b2b;
}

.roadmap-sm .rm-dot {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.roadmap-sm .rm-name {
  display: none;
}

.roadmap-sm .rm-link {
  margin-top: 9px;
}

@media (max-width: 520px) {
  .panel { padding: 18px 14px; }
  .member-card { padding: 11px 4px 10px; }
  .m-name { font-size: 15px; }
  #promptKanji { font-size: 26px; }
  #hudTimer { font-size: 24px; }
}

@media (max-width: 400px) {
  .rm-node { min-width: 34px; }
  .rm-name { display: none; }
}

/* スマホの短い画面でもタイトル画面が収まるように圧縮 */
@media (max-height: 700px) {
  .flag-banner { padding: 4px 18px 7px; }
  .flag-kanji { font-size: 40px; }
  .game-title { font-size: clamp(22px, 6vw, 34px); margin: 8px 0 0; }
  .game-sub { margin-bottom: 6px; font-size: 12px; }
  .best-line { margin: 2px 0; }
  .howto { margin: 7px auto 2px; padding: 6px 4px; }
  .howto p { font-size: 12.5px; margin: 3px 0; line-height: 1.5; }
  .roadmap-block { margin: 8px auto 0; }
  .member-title { margin: 10px 0 6px; }
  .member-card { padding: 8px 4px; }
  .m-desc { display: none; }
  .panel { padding: 16px 12px; }
}

@media (max-height: 640px) {
  .intro-bottom { padding: 10px 12px 8px; }
  .intro-bottom .btn { margin-top: 7px; padding: 9px 26px; font-size: 16px; }
  .intro-cry { font-size: 18px; margin: 0 0 3px; }
  .intro-line { font-size: 12.5px; margin: 3px auto 0; line-height: 1.55; }
}