/* 多読ベスト — タイピング・アーケード（/games/ と /games/<key>/）
   ゲームの画面はいつも夜のアーケード色（サイトのダークモードとは別）。入口のページはサイトの色に合わせる。
   ゲームごとの見た目は src/games/<key>.css（ビルドがこの後ろにつなぐ） */
.page-game main,
.page-games main {
  overflow-x: clip;
}
.ta-wrap {
  padding: 8px max(10px, env(safe-area-inset-left)) 0;
}
.ta {
  --gc: #4dabf7;
  --ta-bg: #0a0d24;
  --ta-ink: #f4f1ff;
  --ta-dim: #9aa3d6;
  --ta-ok: #63e6be;
  --ta-ng: #ff6b6b;
  --ta-gold: #ffd43b;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --disp: Orbitron, 'Zen Maru Gothic', sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  color: var(--ta-ink);
}
.ta-stage {
  position: relative;
  width: min(100%, calc((100vh - 150px) * 16 / 9));
  min-width: min(100%, 320px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: radial-gradient(120% 90% at 50% 0%, #1b2160 0%, var(--ta-bg) 60%, #05060f 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -20px rgba(10, 8, 40, 0.65), 0 0 80px -30px var(--gc);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-family: var(--round);
  isolation: isolate;
}
.ta:fullscreen {
  max-width: none;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ta:fullscreen .ta-stage {
  width: min(100vw, calc((100vh - 50px) * 16 / 9));
  border-radius: 0;
}
.ta-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ta-layer,
.ta-hud,
.ta-scr {
  position: absolute;
  inset: 0;
}
.ta-layer {
  z-index: 2;
  pointer-events: none;
}
.ta-layer > * {
  pointer-events: auto;
}
.ta-hud {
  z-index: 3;
  pointer-events: none;
  padding: calc(10px * var(--ui, 1) + 4px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ta-hud > * {
  pointer-events: auto;
}
.ta-scr {
  z-index: 6;
  display: grid;
  place-items: center;
}
.ta-scr[hidden] {
  display: none;
}
.is-play .ta-scr {
  pointer-events: none;
}
.is-play .ta-scr:not([hidden]) {
  pointer-events: auto;
}
.ta-input {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  font-size: 16px; /* iPhone で拡大されないように */
  border: 0;
  padding: 0;
  z-index: 1;
  caret-color: transparent;
}
.ta-pausebtn {
  position: absolute;
  z-index: 7;
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 40, 0.55);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: none;
  backdrop-filter: blur(6px);
}
.is-play .ta-pausebtn {
  display: block;
}

/* ---------- HUD の部品 ---------- */
.ta-hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ta-hud-row.end {
  justify-content: flex-end;
}
.ta-hud-row .sp {
  flex: 1;
}
.ta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: rgba(8, 10, 36, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: calc(13px * var(--ui, 1) + 3px);
  line-height: 1.1;
  white-space: nowrap;
}
.ta-pill small {
  font-size: 0.68em;
  color: var(--ta-dim);
  letter-spacing: 0.08em;
  font-weight: 700;
}
.ta-pill b {
  font-family: var(--disp);
  font-weight: 900;
  letter-spacing: 0.04em;
  display: inline-block;
}
.ta-meter {
  position: relative;
  height: 10px;
  min-width: 120px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ta-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ta-ok), #74c0fc);
  transition: width 0.25s;
}
.ta-meter.hp i {
  background: linear-gradient(90deg, #ff6b6b, #ffa94d);
}
.ta-meter.warn i {
  animation: ta-blink 0.5s infinite alternate;
}
@keyframes ta-blink {
  to {
    opacity: 0.35;
  }
}
.ta-hearts {
  letter-spacing: 2px;
  font-size: calc(14px * var(--ui, 1) + 4px);
}

/* 打つ英文（ゲームの DOM に出すとき。TA.Target#html()） */
.ta-type {
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(22px * var(--ui, 1) + 6px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: #fff;
  word-break: break-word;
}
.ta-type .ta-d {
  color: var(--ta-ok);
  opacity: 0.85;
}
.ta-type .ta-c {
  color: #0a0d24;
  background: var(--ta-gold);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(255, 212, 59, 0.7);
  animation: ta-cur 0.9s ease-in-out infinite;
}
@keyframes ta-cur {
  50% {
    box-shadow: 0 0 4px rgba(255, 212, 59, 0.3);
  }
}
.ta-type .ta-r {
  color: rgba(255, 255, 255, 0.92);
}
.ta-type .ta-m {
  text-decoration: underline wavy var(--ta-ng);
  text-underline-offset: 4px;
}
.ta-type.shake {
  animation: ta-shake 0.25s;
}
@keyframes ta-shake {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
.ta-ja {
  color: var(--ta-dim);
  font-size: calc(13px * var(--ui, 1) + 3px);
  font-weight: 700;
}

/* ---------- 画面（タイトル・読みこみ・カウント・一時停止・結果） ---------- */
.ta-title {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.ta-t-art {
  position: absolute;
  inset: 0;
}
.ta-t-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ta-t-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 8, 30, 0.94) 0%, rgba(6, 8, 30, 0.78) 42%, rgba(6, 8, 30, 0.15) 75%, rgba(6, 8, 30, 0) 100%), linear-gradient(0deg, rgba(6, 8, 30, 0.7), transparent 40%);
}
.ta-t-in {
  position: relative;
  z-index: 1;
  width: min(700px, 100%);
  padding: calc(14px * var(--ui, 1) + 10px) calc(20px * var(--ui, 1) + 10px);
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui, 1) + 3px);
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.ta-t-in::-webkit-scrollbar {
  display: none;
}
.ta-t-kind {
  margin: 0;
  font-size: calc(11px * var(--ui, 1) + 3px);
  font-weight: 900;
  color: var(--gc);
  letter-spacing: 0.18em;
}
.ta-t-name {
  margin: 0;
  font-family: var(--round);
  font-size: calc(36px * var(--ui, 1) + 8px);
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.ta-t-en {
  display: block;
  font-family: var(--disp);
  font-size: 0.42em;
  letter-spacing: 0.24em;
  color: var(--gc);
  margin-bottom: 4px;
  text-shadow: 0 0 18px var(--gc);
}
.ta-t-sub {
  margin: 0;
  color: #d9dcf7;
  font-size: calc(12px * var(--ui, 1) + 4px);
  font-weight: 700;
}
.ta-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ta-mode,
.ta-lv {
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-radius: 14px;
  font-family: var(--round);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  backdrop-filter: blur(6px);
}
.ta-mode {
  flex: 1 1 140px;
  padding: calc(4px * var(--ui, 1) + 3px) 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.ta-mode b {
  font-size: calc(12px * var(--ui, 1) + 4px);
}
.ta-mode small {
  color: var(--ta-dim);
  font-size: calc(10px * var(--ui, 1) + 2px);
}
.ta-mode.on {
  border-color: var(--gc);
  background: color-mix(in srgb, var(--gc) 26%, transparent);
  box-shadow: 0 0 22px -6px var(--gc);
}
.ta-lvs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: calc(4px * var(--ui, 1) + 3px);
}
.ta-lv {
  --c: #69db7c;
  padding: calc(5px * var(--ui, 1) + 3px) 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.ta-lv b {
  font-family: var(--disp);
  font-size: calc(15px * var(--ui, 1) + 5px);
  color: var(--c);
  line-height: 1.1;
}
.ta-lv span {
  font-size: calc(9px * var(--ui, 1) + 2px);
  color: #cfd3f5;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ta-lv small {
  font-size: calc(9px * var(--ui, 1) + 2px);
  color: var(--ta-gold);
  font-weight: 700;
}
.ta-lv.on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 24%, transparent);
  box-shadow: 0 0 24px -6px var(--c), inset 0 0 0 1px var(--c);
}
.ta-mode:hover,
.ta-lv:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}
.ta-go-row {
  display: flex;
}
.ta-go {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: calc(8px * var(--ui, 1) + 6px) calc(30px * var(--ui, 1) + 12px);
  background: linear-gradient(120deg, var(--gc), #fff 160%);
  color: #08102a;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc) 30%, transparent), 0 10px 40px -8px var(--gc);
  animation: ta-pulse 1.6s ease-in-out infinite;
}
.ta-go span {
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(18px * var(--ui, 1) + 6px);
  letter-spacing: 0.2em;
  padding-left: 0.2em;
}
.ta-go small {
  font-size: calc(9px * var(--ui, 1) + 2px);
  font-weight: 700;
  opacity: 0.75;
}
@keyframes ta-pulse {
  50% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--gc) 0%, transparent), 0 10px 50px -6px var(--gc);
  }
}
.ta-t-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: calc(10px * var(--ui, 1) + 3px);
  color: var(--ta-dim);
}
.ta-rank {
  color: var(--ta-gold);
  font-weight: 900;
}
.ta-chk {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}
.ta-chk input {
  accent-color: var(--gc);
}
.ta-load {
  text-align: center;
  color: var(--ta-dim);
  font-weight: 700;
}
.ta-spin {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--gc);
  animation: ta-rot 0.8s linear infinite;
}
@keyframes ta-rot {
  to {
    transform: rotate(360deg);
  }
}
.ta-count {
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(110px * var(--ui, 1) + 20px);
  color: #fff;
  text-shadow: 0 0 40px var(--gc), 0 0 80px var(--gc);
}
.ta-count.go {
  color: var(--ta-gold);
  letter-spacing: 0.06em;
}
.ta-pause {
  text-align: center;
  background: rgba(8, 10, 36, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 26px 30px;
  backdrop-filter: blur(10px);
}
.ta-pause h3 {
  font-family: var(--disp);
  font-size: 40px;
  letter-spacing: 0.3em;
  margin: 0;
  padding-left: 0.3em;
}
.ta-pause-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px 0 6px;
}
.ta-small {
  font-size: 12px;
  color: var(--ta-dim);
}
.ta-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: 700 14px var(--round);
  text-decoration: none;
  transition: transform 0.15s, background 0.2s;
}
.ta-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.ta-btn.primary {
  background: var(--gc);
  border-color: var(--gc);
  color: #08102a;
}
.ta-btn.ta-x {
  background: #000;
}
.ta-scr .ta-btn {
  font-size: calc(10px * var(--ui, 1) + 4px);
}

/* 結果 */
.ta-res {
  width: min(760px, 94%);
  max-height: 94%;
  overflow-y: auto;
  scrollbar-width: thin;
  background: linear-gradient(160deg, rgba(20, 24, 70, 0.92), rgba(8, 10, 34, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: calc(12px * var(--ui, 1) + 8px) calc(18px * var(--ui, 1) + 8px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 60px -20px var(--gc);
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui, 1) + 4px);
}
.ta-res-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ta-res-h {
  margin: 0;
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(28px * var(--ui, 1) + 8px);
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #fff, var(--gc));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ta-res.lose .ta-res-h {
  background: linear-gradient(90deg, #fff, #ff8787);
  -webkit-background-clip: text;
  background-clip: text;
}
.ta-res-rank {
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(44px * var(--ui, 1) + 14px);
  width: 1.6em;
  height: 1.6em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 5px solid currentColor;
  transform: rotate(-8deg);
  flex: none;
  text-shadow: 0 0 20px currentColor;
  box-shadow: 0 0 30px -6px currentColor, inset 0 0 20px -8px currentColor;
}
.r-S {
  color: #ffd43b;
}
.r-A {
  color: #ff8787;
}
.r-B {
  color: #74c0fc;
}
.r-C {
  color: #8ce99a;
}
.r-D {
  color: #adb5bd;
}
.ta-res-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ta-res-score small {
  font-family: var(--disp);
  color: var(--ta-dim);
  letter-spacing: 0.2em;
}
.ta-res-score b {
  font-family: var(--disp);
  font-size: calc(38px * var(--ui, 1) + 10px);
  font-weight: 900;
  line-height: 1;
}
.ta-new {
  font-family: var(--disp);
  font-weight: 900;
  color: #08102a;
  background: var(--ta-gold);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 20px rgba(255, 212, 59, 0.7);
}
.ta-prev {
  color: var(--ta-dim);
  font-size: 13px;
  font-weight: 700;
}
.ta-res-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
  gap: 8px;
}
.ta-res-stats li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
}
.ta-res-stats small {
  color: var(--ta-dim);
  font-size: 11px;
  font-weight: 700;
}
.ta-res-stats b {
  font-family: var(--disp);
  font-size: calc(16px * var(--ui, 1) + 6px);
}
.ta-res-stats b small {
  font-size: 0.55em;
}
.ta-res-note {
  margin: 0;
  font-weight: 700;
  color: #e7e9ff;
  font-size: 14px;
}
.ta-res-keys {
  margin: 0;
  font-size: 13px;
  color: var(--ta-dim);
}
.ta-res-keys kbd {
  font-family: var(--mono);
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 6px;
  padding: 1px 7px;
  color: #fff;
}
.ta-review {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 14px;
}
.ta-review summary {
  cursor: pointer;
  font-weight: 800;
}
.ta-review ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ta-review li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  padding-bottom: 6px;
}
.ta-review li span {
  font-family: var(--mono);
  font-weight: 700;
}
.ta-review li small {
  color: var(--ta-dim);
  flex-basis: 100%;
}
.ta-review a {
  color: var(--gc);
  font-weight: 700;
  font-size: 13px;
}
.ta-say {
  cursor: pointer;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2px 6px;
  color: #fff;
}
.ta-xp {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ta-gold);
}
.ta-xp-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  overflow: hidden;
}
.ta-xp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd43b, #ff922b);
  border-radius: inherit;
}
.ta-xp small {
  color: #fff;
}
.ta-res-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ta-conf {
  position: absolute;
  z-index: 8;
  top: 0;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
}

/* お知らせ・大きな字幕 */
.ta-toast {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: calc(46px * var(--ui, 1) + 18px); /* 上の HUD の列にかぶらない */
  translate: -50% 0;
  max-width: 90%;
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(10, 12, 40, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  display: none;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ta-toast.show {
  display: block;
}
.ta-toast small {
  display: block;
  color: var(--ta-dim);
  font-size: 12px;
}
.ta-toast.warn {
  border-color: #ffa94d;
  background: rgba(60, 26, 0, 0.94);
}
.ta-toast.gold {
  border-color: var(--ta-gold);
}
.ta-banner {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 38%;
  text-align: center;
  pointer-events: none;
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(46px * var(--ui, 1) + 10px);
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 30px var(--gc), 0 4px 0 rgba(0, 0, 0, 0.4);
}
.ta-banner small {
  display: block;
  font-family: var(--round);
  font-size: 0.36em;
  letter-spacing: 0.04em;
  color: #e3e6ff;
}
.ta-banner.danger {
  color: #ffc9c9;
  text-shadow: 0 0 30px #ff3b3b;
}
.ta-banner.gold {
  color: #fff3bf;
  text-shadow: 0 0 30px #fab005;
}

/* キーボードガイド */
.ta-kb {
  margin: 10px auto 0;
  width: min(100%, 760px);
  padding: 10px 12px 8px;
  border-radius: 18px;
  background: #0f1335;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.ta-kb[hidden] {
  display: none;
}
.kb-row {
  display: flex;
  gap: 5px;
}
.kb-r1 {
  margin-left: 18px;
}
.kb-r2 {
  margin-left: 30px;
}
.kb-r3 {
  margin-left: 50px;
}
.kb-k {
  position: relative;
  width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #1c2150;
  border-bottom: 3px solid color-mix(in srgb, var(--f) 70%, #000);
  color: #c7cbf0;
  font: 700 15px var(--mono);
  transition: background 0.12s;
}
.kb-k i {
  position: absolute;
  bottom: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.kb-space {
  width: 300px;
  font-size: 12px;
}
.kb-k.on {
  background: var(--f);
  color: #0a0d24;
  box-shadow: 0 0 18px var(--f);
  transform: translateY(1px);
}
.kb-k.hit {
  animation: kb-hit 0.25s;
}
.kb-k.bad {
  animation: kb-bad 0.3s;
}
@keyframes kb-hit {
  50% {
    transform: translateY(3px) scale(0.94);
  }
}
@keyframes kb-bad {
  30% {
    background: #ff6b6b;
  }
}
.kb-say {
  margin: 2px 0 0;
  font-size: 14px;
  color: #c7cbf0;
  min-height: 1.4em;
}
@media (max-width: 720px) {
  .kb-k {
    width: 26px;
    height: 30px;
    font-size: 11px;
  }
  .kb-row {
    gap: 3px;
  }
  .kb-space {
    width: 160px;
  }
  .kb-r1 {
    margin-left: 10px;
  }
  .kb-r2 {
    margin-left: 16px;
  }
  .kb-r3 {
    margin-left: 28px;
  }
}

/* 画面の下の操作 */
.ta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 10px auto 0;
  padding: 0 4px;
  font-size: 14px;
  color: var(--ink2);
}
.ta-bar > a {
  font-weight: 700;
  text-decoration: none;
}
.ta-bar b {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ta-bar-r {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ta-bar button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font: 700 13px var(--round);
}
.ta:fullscreen .ta-bar {
  color: #ccc;
}

/* ゲームのページの下の説明 */
.ta-info {
  padding-top: 28px;
  padding-bottom: 40px;
}
.ta-info h1 {
  font-family: var(--round);
  font-size: clamp(26px, 4vw, 38px);
  margin: 4px 0 8px;
}
.ta-info h1 small {
  font-family: Orbitron, sans-serif;
  font-size: 0.42em;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.ta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ta-meta span {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 700;
}
.ta-how,
.ta-lvtbl {
  margin-top: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.ta-how h2,
.ta-lvtbl h2 {
  margin-top: 0;
}
.ta-how ol {
  padding-left: 1.3em;
  line-height: 1.9;
}
.ta-ime {
  background: var(--bg2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
}
.ta-lvtbl ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 8px;
}
.ta-lvtbl li {
  border-left: 5px solid var(--c);
  background: var(--bg2);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
}
.ta-lvtbl li b {
  color: var(--c);
  font-family: Orbitron, sans-serif;
}
.ta-lvtbl li small {
  color: var(--muted);
}

/* ---------- ゲームのカード（入口と各ページの下） ---------- */
.gc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  margin: 18px 0 30px;
}
.gc-grid.gc-mini {
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 14px;
}
.gc {
  --c: #4dabf7;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.25s;
  transform-style: preserve-3d;
}
.gc:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--c), 0 20px 50px -20px var(--c);
}
.gc[hidden] {
  display: none;
}
.gc-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #1b2160, #0a0d24);
  display: block;
}
.gc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}
.gc:hover .gc-img img {
  transform: scale(1.07);
}
.gc-noimg {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 64px;
}
.gc-kind {
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba(8, 10, 36, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 99px;
  padding: 3px 10px;
  backdrop-filter: blur(6px);
}
.gc-best {
  position: absolute;
  right: 10px;
  top: 10px;
  background: #ffd43b;
  color: #2b1d00;
  font-size: 12px;
  font-weight: 900;
  border-radius: 99px;
  padding: 3px 10px;
}
.gc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 14px;
  flex: 1;
}
.gc-en {
  font-family: Orbitron, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c);
  font-weight: 900;
  filter: saturate(1.2) brightness(0.85);
}
.gc-t {
  font-family: var(--round);
  font-size: 21px;
  line-height: 1.25;
}
.gc-catch {
  font-size: 14px;
  color: var(--ink2);
  font-weight: 700;
}
.gc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.gc-tags i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 9px;
  background: color-mix(in srgb, var(--c) 16%, var(--bg2));
  color: var(--ink2);
}
.gc-go {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 900;
  color: var(--c);
  filter: brightness(0.85);
}
.gc-mini .gc-t {
  font-size: 17px;
}
.gc-mini .gc-catch,
.gc-mini .gc-tags {
  display: none;
}

/* ---------- 入口（/games/） ---------- */
.gh-hero {
  position: relative;
  min-height: min(78vh, 680px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: #0a0d24;
}
.gh-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gh-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gh-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 8, 30, 0.92) 0%, rgba(6, 8, 30, 0.6) 45%, rgba(6, 8, 30, 0.05) 80%), linear-gradient(0deg, rgba(6, 8, 30, 0.85), transparent 45%);
}
.gh-in {
  position: relative;
  z-index: 2;
  padding-top: 30px;
  padding-bottom: 40px;
  width: 100%;
}
.gh-in .crumb,
.gh-in .crumb a {
  color: rgba(255, 255, 255, 0.75);
}
.gh-kicker {
  font-family: Orbitron, sans-serif;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: #74c0fc;
  margin: 0 0 6px;
  text-shadow: 0 0 20px #4dabf7;
}
.gh-kicker span {
  background: #ff6b6b;
  color: #fff;
  border-radius: 6px;
  padding: 1px 7px;
  letter-spacing: 0.1em;
  font-size: 12px;
  vertical-align: middle;
}
.gh-h {
  margin: 0;
  font-family: var(--round);
  font-weight: 900;
  line-height: 1;
  font-size: clamp(40px, 8vw, 86px);
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
.gh-h span {
  display: block;
}
.gh-h2 {
  background: linear-gradient(90deg, #ffd43b, #ff6b6b 40%, #da77f2 70%, #4dabf7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(218, 119, 242, 0.45));
}
.gh-type {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 24px);
  margin: 14px 0 4px;
  min-height: 1.5em;
  color: #63e6be;
}
.gh-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  vertical-align: -0.15em;
  background: #ffd43b;
  margin-left: 2px;
  animation: ta-blink 0.55s steps(1) infinite alternate;
}
.gh-lead {
  max-width: 640px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1.8;
  color: #e6e8ff;
}
.gh-chips {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gh-chips li {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(6px);
}
.gh-acts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gh-acts .btn:not(.primary) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.gh-me {
  margin-top: -26px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px 22px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 16px 22px;
}
.gh-me-l {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.gh-me-l > div {
  flex: 1;
  min-width: 0;
}
.gh-me-ic {
  font-size: 44px;
  line-height: 1;
}
.gh-me-l small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.gh-me-l b {
  display: block;
  font-family: var(--round);
  font-size: 22px;
}
.gh-me-bar {
  height: 8px;
  background: var(--bg2);
  border-radius: 99px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.gh-me-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffd43b, #ff922b);
  border-radius: inherit;
}
.gh-me-n {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}
.gh-me-n b {
  display: block;
  font-family: Orbitron, sans-serif;
  font-size: 22px;
  color: var(--brand);
}
.gh-me-n small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.gh-me-hist {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.gh-me-hist:empty {
  display: none;
}
.gh-me-hist a {
  background: var(--bg2);
  border-radius: 99px;
  padding: 3px 10px;
  text-decoration: none;
  color: var(--ink2);
  font-weight: 700;
}
.gh-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.gh-tabs button {
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font: 800 14px var(--round);
}
.gh-tabs button small {
  color: var(--muted);
  margin-left: 2px;
}
.gh-tabs button[aria-selected='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.gh-tabs button[aria-selected='true'] small {
  color: rgba(255, 255, 255, 0.8);
}
.gh-lv-grid,
.gh-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin: 14px 0 34px;
}
.gh-lv-card {
  border-top: 5px solid var(--c);
  background: var(--card);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gh-lv-ic {
  font-size: 30px;
}
.gh-lv-card b {
  display: block;
  font-family: var(--round);
  font-size: 17px;
}
.gh-lv-card small {
  color: var(--c);
  font-weight: 800;
  filter: brightness(0.85);
}
.gh-lv-card p {
  font-size: 14px;
  margin: 6px 0;
}
.gh-lv-g {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gh-lv-g a {
  background: var(--bg2);
  border-radius: 99px;
  padding: 3px 10px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}
.gh-why-grid > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
}
.gh-why-grid b {
  font-family: var(--round);
  font-size: 17px;
}
.gh-why-grid p {
  font-size: 14px;
  margin: 6px 0 0;
}
@media (max-width: 720px) {
  .gh-me {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 12px;
  }
  .gh-hero {
    min-height: 0;
  }
  .ta-stage {
    border-radius: 14px;
  }
  .ta-bar {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ta-go,
  .ta-type .ta-c {
    animation: none;
  }
}

/* 結果画面を小さな画面でも収める（ボタンはいつも下に見える） */
.ta-res {
  gap: calc(4px * var(--ui, 1) + 4px);
}
.ta-res-rank {
  font-size: calc(34px * var(--ui, 1) + 12px);
}
.ta-res-score b {
  font-size: calc(30px * var(--ui, 1) + 10px);
}
.ta-res-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
  gap: 6px;
}
.ta-res-stats li {
  padding: 5px 9px;
  min-width: 0;
}
.ta-res-stats b {
  font-size: calc(12px * var(--ui, 1) + 7px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ta-res-acts {
  position: sticky;
  bottom: calc(-12px * var(--ui, 1) - 8px);
  margin: 0 calc(-18px * var(--ui, 1) - 8px) calc(-12px * var(--ui, 1) - 8px);
  padding: 10px calc(18px * var(--ui, 1) + 8px) calc(12px * var(--ui, 1) + 8px);
  background: linear-gradient(180deg, rgba(10, 12, 38, 0), rgba(10, 12, 38, 0.96) 28%);
  z-index: 1;
}

/* スマホの縦画面：タイトルと結果は縦長のステージに（遊ぶときは 16:9） */
@media (max-width: 640px) and (orientation: portrait) {
  .ta-stage.is-title,
  .ta-stage.is-result {
    aspect-ratio: 4 / 5;
    width: 100%;
  }
  .is-title .ta-title {
    align-items: end;
  }
  .is-title .ta-t-art::after {
    background: linear-gradient(0deg, rgba(6, 8, 30, 0.96) 0%, rgba(6, 8, 30, 0.88) 55%, rgba(6, 8, 30, 0.2) 85%, rgba(6, 8, 30, 0) 100%);
  }
  .ta-lvs {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ta-mode small {
    display: none;
  }
}

/* サイトの emo.js が絵文字を絵（img.emo）に変える。ゲームの中の「絵を枠いっぱいに」の決まりで大きくならないように */
.ta img.emo,
.gc img.emo {
  position: static !important;
  inset: auto !important;
  width: 1.15em !important;
  height: 1.15em !important;
  max-width: none !important;
  object-fit: contain !important;
  vertical-align: -0.2em;
  transform: none;
}

/* レベルのアイコン（Codex の ic-lv-0〜6） */
.ta-lv-ic {
  width: calc(20px * var(--ui, 1) + 12px);
  height: calc(20px * var(--ui, 1) + 12px);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s;
}
.ta-lv.on .ta-lv-ic {
  transform: scale(1.15) rotate(-6deg);
  filter: drop-shadow(0 0 10px var(--c));
}
.ta-lvtbl li .lv-ic {
  width: 34px;
  height: 34px;
  object-fit: contain;
  align-self: flex-start;
}
.gh-lv-ic img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* ワード・ブラスター（src/games/blaster.js） */
.bl-combo b {
  color: #ffd43b;
}
.bl-sh {
  letter-spacing: 1px;
  font-family: inherit !important;
}
.bl-nova .ta-meter {
  min-width: calc(60px * var(--ui, 1) + 30px);
}
.bl-nova .ta-meter i {
  background: linear-gradient(90deg, #74c0fc, #e599f7);
}
.bl-nova .ta-meter.warn {
  box-shadow: 0 0 14px #74c0fc;
}
.bl-bossbar {
  justify-content: center;
  gap: 8px;
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(10px * var(--ui, 1) + 3px);
  color: #ffa8a8;
  letter-spacing: 0.2em;
}
.bl-bossbar[hidden] {
  display: none;
}
.bl-bossbar .ta-meter {
  width: min(60%, 520px);
  height: 12px;
}
.bl-boss {
  position: absolute;
  left: 50%;
  bottom: calc(70px * var(--ui, 1) + 10px);
  translate: -50% 0;
  width: min(92%, 900px);
  padding: calc(8px * var(--ui, 1) + 4px) calc(14px * var(--ui, 1) + 6px);
  border-radius: 18px;
  background: rgba(30, 6, 40, 0.8);
  border: 1.5px solid rgba(247, 131, 172, 0.55);
  box-shadow: 0 0 40px -10px #f783ac;
  backdrop-filter: blur(8px);
  text-align: center;
}
.bl-boss[hidden] {
  display: none;
}
.bl-boss .ta-type {
  font-size: calc(20px * var(--ui, 1) + 5px);
}
.bl-boss-k {
  margin: 0 0 4px;
  font-size: calc(10px * var(--ui, 1) + 3px);
  font-weight: 900;
  color: #ffa8a8;
  letter-spacing: 0.06em;
}
.bl-boss .ta-ja {
  margin: 4px 0 0;
}
.bl-boss.won {
  border-color: #ffd43b;
  box-shadow: 0 0 50px -6px #ffd43b;
}

/* タイプ・グランプリ（src/games/grandprix.js）：順位・コースの帯・下の英文パネル・結果の表彰台 */
.gp-hud {
  align-items: flex-start;
}
.gp-pos {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 2px 14px 5px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.92), rgba(201, 42, 42, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--disp);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(255, 80, 80, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gp-pos b {
  display: inline-block;
  font-size: calc(30px * var(--ui, 1) + 8px);
}
.gp-pos sup {
  font-size: calc(12px * var(--ui, 1) + 4px);
}
.gp-pos small {
  font-size: calc(11px * var(--ui, 1) + 3px);
  opacity: 0.75;
  margin-left: 4px;
}
.gp-pos.p1 {
  background: linear-gradient(135deg, #ffe066, #f59f00);
  color: #2b1d00;
  box-shadow: 0 6px 24px -4px rgba(250, 176, 5, 0.85);
}
.gp-gap.ahead b {
  color: var(--ta-ok);
}
.gp-gap.behind b {
  color: var(--ta-ng);
}

/* みんなの位置の帯 */
.gp-strip {
  position: relative;
  align-self: center;
  width: min(62%, 560px);
  height: calc(14px * var(--ui, 1) + 10px);
  margin-top: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(8, 10, 36, 0.55), rgba(8, 10, 36, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none !important;
}
.gp-strip::before {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 8px, transparent 8px 14px);
}
.gp-lapm {
  position: absolute;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: rgba(255, 212, 59, 0.55);
}
.gp-goal {
  position: absolute;
  right: -0.2em;
  top: 50%;
  translate: 50% -50%;
  font-size: calc(12px * var(--ui, 1) + 6px);
}
.gp-dot {
  position: absolute;
  left: 0;
  top: 50%;
  translate: -50% -50%;
  font-size: calc(11px * var(--ui, 1) + 6px);
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--c, #fff));
  transition: left 0.1s linear;
}
.gp-dot.me {
  z-index: 2;
  font-size: calc(14px * var(--ui, 1) + 8px);
  filter: drop-shadow(0 0 6px #ffd43b) drop-shadow(0 0 2px #fff);
}
.gp-dot.nap::after {
  content: '💤';
  position: absolute;
  left: 60%;
  top: -0.9em;
  font-size: 0.7em;
}

/* 下の英文パネル */
.gp-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(14px * var(--ui, 1) + 8px) calc(46px * var(--ui, 1) + 18px) calc(8px * var(--ui, 1) + 6px) calc(16px * var(--ui, 1) + 8px);
  background: linear-gradient(180deg, rgba(6, 8, 30, 0) 0%, rgba(6, 8, 30, 0.8) 26%, rgba(6, 8, 30, 0.94) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gp-course {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  min-width: 0;
  font-size: calc(10px * var(--ui, 1) + 3px);
  font-weight: 700;
  color: var(--ta-dim);
  white-space: nowrap;
  overflow: hidden;
}
.gp-course b {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-ja {
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-cnt {
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--disp);
  color: var(--gc);
  flex: none;
}
.gp-type {
  min-height: 1.55em;
}
.gp-type.long {
  font-size: calc(18px * var(--ui, 1) + 5px);
}
.gp-type.xlong {
  font-size: calc(15px * var(--ui, 1) + 4px);
  line-height: 1.45;
}
.gp-panel.kid .gp-type {
  font-size: calc(28px * var(--ui, 1) + 8px);
  letter-spacing: 0.04em;
}
.gp-fin {
  font-family: var(--disp);
  color: var(--ta-gold);
  text-shadow: 0 0 18px rgba(255, 212, 59, 0.7);
}
.gp-next {
  margin: 0;
  font-family: var(--mono);
  font-size: calc(12px * var(--ui, 1) + 3px);
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-next::before {
  content: 'NEXT ▸ ';
  font-family: var(--disp);
  font-size: 0.8em;
  color: var(--gc);
  opacity: 0.85;
}
.gp-next.last {
  color: var(--ta-gold);
  font-family: var(--round);
  font-weight: 700;
}
.gp-next.last::before {
  content: '';
}
.gp-next:empty {
  display: none;
}

/* 結果：コースと表彰台 */
.gp-res {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gp-res-course {
  margin: 0;
  font-size: calc(10px * var(--ui, 1) + 4px);
  color: var(--ta-dim);
  font-weight: 700;
}
.gp-res-course b {
  color: #fff;
}
.gp-podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.gp-podium li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: calc(10px * var(--ui, 1) + 5px);
  font-weight: 700;
}
.gp-podium li b {
  font-family: var(--disp);
  width: 1.4em;
  color: var(--ta-dim);
}
.gp-podium li:first-child b {
  color: var(--ta-gold);
}
.gp-podium li small {
  margin-left: auto;
  font-family: var(--mono);
  color: var(--ta-dim);
}
.gp-podium li.me {
  background: color-mix(in srgb, var(--gc) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc) 60%, transparent);
}
.gp-podium li.me small {
  color: #fff;
}
.gp-res-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gp-up {
  color: var(--ta-ok);
}
.gp-down {
  color: var(--ta-ng);
}

/* タイピング・アーケード — リズム・タイパー（src/games/rhythm.js） */
.rt-top .ta-pill b small {
  font-size: 0.6em;
  color: var(--ta-dim);
}
.rt-trk small {
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-gr {
  align-items: center;
}
.rt-gm {
  width: calc(110px * var(--ui, 1) + 30px);
  min-width: 0;
  height: 12px;
  overflow: visible;
}
.rt-gm i {
  background: linear-gradient(90deg, #4dabf7, #9775fa);
  transition: width 0.15s, background 0.3s;
}
.rt-gm.ok i {
  background: linear-gradient(90deg, #ffd43b, #ff8787, #da77f2);
  box-shadow: 0 0 10px #ffd43b;
}
/* クリアの線（70%） */
.rt-gm em {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 70%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  opacity: 0.85;
}
.rt-gr b {
  min-width: 3.1em;
  text-align: right;
}
.rt-prog {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.rt-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gc), #fff);
}
/* コンボ */
.rt-combo {
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  text-align: center;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity 0.2s;
}
.rt-combo.on {
  opacity: 1;
}
.rt-combo > div {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.rt-combo b {
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(44px * var(--ui, 1) + 10px);
  color: #fff;
  text-shadow: 0 0 18px var(--gc), 0 3px 0 rgba(0, 0, 0, 0.4);
}
.rt-combo small {
  margin-top: 4px;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: calc(11px * var(--ui, 1) + 4px);
  color: var(--ta-dim);
}
.rt-combo.fever b {
  background: linear-gradient(90deg, #ffd43b, #ff6bcb, #74c0fc, #63e6be, #ffd43b);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px #ff6bcb);
  animation: rt-rain 1s linear infinite;
}
.rt-combo.fever small {
  color: var(--ta-gold);
}
@keyframes rt-rain {
  to {
    background-position: 200% 0;
  }
}
/* WORD BONUS のポップ */
.rt-wpop {
  position: absolute;
  left: 30%;
  top: 22%;
  width: 0;
  display: flex;
  justify-content: center;
  pointer-events: none !important;
  z-index: 4;
}
.rt-wpop > div {
  white-space: nowrap;
  text-align: center;
  padding: 6px 16px 8px;
  border-radius: 14px;
  background: rgba(10, 8, 40, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 24px -4px var(--c, var(--gc));
}
.rt-wpop i {
  display: block;
  font-style: normal;
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(10px * var(--ui, 1) + 4px);
  letter-spacing: 0.2em;
  color: var(--ta-gold);
}
.rt-wpop b {
  display: block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: calc(26px * var(--ui, 1) + 6px);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 12px var(--c, var(--gc));
}
.rt-wpop small {
  display: block;
  font-size: calc(13px * var(--ui, 1) + 4px);
  color: #e9e4ff;
}
/* 結果画面：判定の割合の帯 */
.rt-jbar {
  display: flex;
  height: 10px;
  margin: 4px auto 8px;
  max-width: 420px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.rt-jbar i {
  display: block;
  min-width: 2px;
}
/* タイトル画面：タイミング調整 */
.rt-off {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rt-off button {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.rt-off button:hover {
  background: rgba(255, 255, 255, 0.18);
}
.rt-off b {
  display: inline-block;
  min-width: 5.4em;
  text-align: center;
  font-family: var(--disp);
  color: #fff;
}
.rt-off small {
  opacity: 0.8;
}

/* タイピング・アーケード — ことばクエスト（/games/quest/）の見た目。共通は src/games.css */

/* ---------- HUD（はらだくんの Lv・HP・EXP） ---------- */
.qs-hud {
  align-items: flex-start;
}
.qs-me {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui, 1) + 3px);
  padding: 5px calc(10px * var(--ui, 1) + 4px) 6px 6px;
  border-radius: 16px;
  background: rgba(14, 9, 30, 0.68);
  border: 1px solid rgba(255, 214, 140, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qs-lv {
  display: grid;
  place-items: center;
  align-content: center;
  width: calc(30px * var(--ui, 1) + 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe8a3, #f59f00 60%, #a75f00);
  color: #3b1d00;
  line-height: 1;
  box-shadow: 0 0 12px rgba(255, 180, 60, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.qs-lv small {
  font: 800 calc(6px * var(--ui, 1) + 4px) / 1 var(--disp);
}
.qs-lv b {
  font: 900 calc(12px * var(--ui, 1) + 5px) / 1 var(--disp);
  display: inline-block;
}
.qs-bars {
  display: grid;
  gap: 4px;
}
.qs-hpl,
.qs-xpl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qs-hpl small,
.qs-xpl small {
  font: 800 calc(7px * var(--ui, 1) + 4px) / 1 var(--disp);
  color: var(--ta-dim);
  width: 2.8em;
}
.qs-hpl b {
  font: 900 calc(10px * var(--ui, 1) + 4px) / 1 var(--disp);
  min-width: 4.6em;
  display: inline-block;
}
.ta-meter.qs-hp,
.ta-meter.qs-xp {
  min-width: 0;
  width: calc(150px * var(--ui, 1) + 30px);
}
.ta-meter.qs-hp {
  height: calc(8px * var(--ui, 1) + 5px);
}
.qs-hp i {
  background: linear-gradient(90deg, #40c057, #94d82d);
}
.qs-hp.mid i {
  background: linear-gradient(90deg, #fab005, #ffd43b);
}
.qs-hp.low i {
  background: linear-gradient(90deg, #fa5252, #ff8787);
  animation: ta-blink 0.45s infinite alternate;
}
.ta-meter.qs-xp {
  height: calc(4px * var(--ui, 1) + 3px);
}
.qs-xp i {
  background: linear-gradient(90deg, #4dabf7, #b197fc);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.qs-dots {
  margin-left: 2px;
  letter-spacing: 1px;
  font-size: 0.78em;
  color: var(--ta-gold);
}

/* ---------- 単語の札（モンスターの上） ---------- */
.ta-layer > .qs-word,
.ta-layer > .qs-sp,
.ta-layer > .qs-cap {
  pointer-events: none;
}
.qs-word {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 56%;
  transform: translate(-50%, -100%);
}
.qs-word.top {
  transform: translate(-50%, 0);
}
.qs-card {
  position: relative;
  padding: calc(6px * var(--ui, 1) + 4px) calc(16px * var(--ui, 1) + 6px) calc(8px * var(--ui, 1) + 4px);
  border-radius: calc(14px * var(--ui, 1) + 4px);
  background: linear-gradient(180deg, rgba(42, 25, 60, 0.93), rgba(16, 10, 30, 0.95));
  border: 2px solid rgba(255, 206, 120, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 169, 77, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qs-card::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: rgb(17, 11, 31);
  border-right: 2px solid rgba(255, 206, 120, 0.55);
  border-bottom: 2px solid rgba(255, 206, 120, 0.55);
  transform: translateX(-50%) rotate(45deg);
}
.qs-word.top .qs-card::after {
  display: none;
}
.qs-card.hinted {
  border-color: rgba(255, 212, 59, 0.85);
}
.qs-card.done {
  border-color: var(--ta-ok);
  box-shadow: 0 0 34px rgba(99, 230, 190, 0.55), 0 10px 28px rgba(0, 0, 0, 0.55);
}
.qs-card.done::after {
  border-color: var(--ta-ok);
}
.qs-ja {
  font-family: var(--round);
  font-weight: 900;
  color: #fff1d6;
  font-size: calc(17px * var(--ui, 1) + 7px);
  line-height: 1.3;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  overflow-wrap: anywhere;
}
.qs-see .qs-ja {
  font-size: calc(12px * var(--ui, 1) + 6px);
  color: #ffe0b0;
}
.qs-en {
  margin-top: 2px;
  white-space: nowrap;
}
.qs-en.ta-type {
  font-size: calc(24px * var(--ui, 1) + 7px);
  line-height: 1.4;
}
.qs-en.shake {
  animation: ta-shake 0.25s;
}
/* おもい出すモードの文字数のマス */
.qs-slots {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.14em;
  font-family: var(--mono);
  font-weight: 800;
  font-size: calc(22px * var(--ui, 1) + 7px);
  line-height: 1.3;
  padding-top: 2px;
}
.qs-s {
  display: inline-block;
  width: 0.82em;
  text-align: center;
  border-bottom: 3px solid rgba(255, 255, 255, 0.45);
  color: transparent;
}
.qs-s.ok {
  color: var(--ta-ok);
  border-color: var(--ta-ok);
}
.qs-s.hint {
  color: rgba(255, 230, 160, 0.45);
  border-color: rgba(255, 212, 59, 0.6);
}
.qs-s.sym {
  width: 0.55em;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.75);
}
.qs-gap {
  display: inline-block;
  width: 0.5em;
  border-bottom: 3px solid transparent;
}
.qs-s.cur,
.qs-gap.cur {
  border-color: var(--ta-gold);
  animation: qs-cur 0.9s ease-in-out infinite;
}
@keyframes qs-cur {
  50% {
    border-color: rgba(255, 212, 59, 0.3);
  }
}
.qs-tip {
  margin-top: 4px;
  font-size: calc(8px * var(--ui, 1) + 5px);
  color: var(--ta-dim);
  font-weight: 700;
  white-space: nowrap;
}
.qs-tip small {
  font-size: 0.9em;
}
.qs-tip kbd {
  font-family: var(--disp);
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.qs-tip.nudge {
  color: var(--ta-gold);
}
.qs-tip.nudge kbd {
  border-color: var(--ta-gold);
  box-shadow: 0 0 10px rgba(255, 212, 59, 0.6);
}

/* ---------- 必殺技チャンス ---------- */
.qs-sp {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 11%;
  width: min(86%, 980px);
  transform: translateX(-50%);
}
.qs-sp-card {
  padding: calc(9px * var(--ui, 1) + 6px) calc(20px * var(--ui, 1) + 8px) calc(12px * var(--ui, 1) + 6px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(52, 22, 10, 0.95), rgba(22, 8, 28, 0.96));
  border: 2px solid #ffd43b;
  box-shadow: 0 0 0 4px rgba(255, 212, 59, 0.15), 0 0 60px rgba(255, 170, 40, 0.45), 0 20px 40px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.qs-sp-h {
  margin: 0;
  font: 900 calc(17px * var(--ui, 1) + 6px) / 1.25 var(--round);
  color: #ffe066;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(255, 180, 0, 0.8);
}
.qs-sp-h small {
  display: block;
  font-size: 0.55em;
  letter-spacing: 0.04em;
  color: #f1e3c8;
  text-shadow: none;
}
.qs-sp-src {
  margin: 2px 0 6px;
  font-size: calc(9px * var(--ui, 1) + 5px);
  color: #d9c7ab;
  font-weight: 700;
}
.qs-sp-txt.ta-type {
  font-size: calc(19px * var(--ui, 1) + 6px);
  text-align: left;
  margin-top: 4px;
}
.qs-sp-bar {
  margin-top: 8px;
  height: calc(6px * var(--ui, 1) + 4px);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.qs-sp-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff922b, #ffd43b);
}
.qs-sp-bar.warn i {
  background: linear-gradient(90deg, #fa5252, #ff8787);
  animation: ta-blink 0.3s infinite alternate;
}

/* ---------- 必殺技の英文の朗読（字幕） ---------- */
.qs-cap {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 3%;
  max-width: 84%;
  transform: translateX(-50%);
}
.qs-cap > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 14px;
  background: rgba(10, 6, 22, 0.82);
  border: 1px solid rgba(255, 212, 59, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.qs-cap p {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(12px * var(--ui, 1) + 5px);
  line-height: 1.45;
  color: #fff8e1;
}

/* 耳でタイプ（src/games/listen.js）。上に光の玉（canvas）、下に下線の列のカード、いちばん下に操作のボタン */
.ls {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6px * var(--ui, 1) + 3px);
  padding: calc(44px * var(--ui, 1) + 12px) calc(22px * var(--ui, 1) + 8px) calc(10px * var(--ui, 1) + 6px);
}
.ls-orb {
  flex: 0 0 34%;
  width: min(100%, 520px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: none;
  color: #dffcf3;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ls-orb:focus-visible {
  outline: 2px solid var(--gc);
  outline-offset: 2px;
}
.ls-state {
  display: inline-block;
  padding: calc(2px * var(--ui, 1) + 2px) calc(10px * var(--ui, 1) + 6px);
  border-radius: 99px;
  background: rgba(4, 28, 30, 0.6);
  border: 1px solid rgba(99, 230, 190, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 900 calc(10px * var(--ui, 1) + 4px) / 1.3 var(--round);
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ls-orb.on .ls-state {
  border-color: rgba(99, 230, 190, 0.7);
  box-shadow: 0 0 18px -4px rgba(56, 217, 169, 0.7);
}
.ls-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 1040px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: calc(10px * var(--ui, 1) + 6px) calc(20px * var(--ui, 1) + 6px);
  border-radius: calc(16px * var(--ui, 1) + 4px);
  background: linear-gradient(160deg, rgba(12, 42, 54, 0.74), rgba(7, 13, 34, 0.82));
  border: 1px solid rgba(99, 230, 190, 0.2);
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.4s, box-shadow 0.4s;
  display: flex;
  flex-direction: column;
}
/* 上下のすきまで中央に（はみ出すときは上から） */
.ls-card::before,
.ls-card::after {
  content: '';
  flex: 1 0 0;
}
.ls-card.done {
  border-color: rgba(99, 230, 190, 0.6);
  box-shadow: 0 0 44px -12px rgba(56, 217, 169, 0.6), 0 20px 50px -22px rgba(0, 0, 0, 0.75);
}
/* 下線の列（1字ずつ。JetBrains Mono なので字の幅がそろう） */
.ls-slots.ta-type {
  font-size: var(--fs, calc(20px * var(--ui, 1) + 6px));
  line-height: 1.9;
  text-align: center;
  color: #fff;
  margin: auto 0;
}
.ls-slots .lw {
  display: inline-block;
  white-space: nowrap;
  margin: 0 0.18em;
  transform-origin: 50% 70%;
}
.ls-slots .c {
  display: inline-block;
  min-width: 1ch;
  margin: 0 0.04em;
  font-style: normal;
  text-align: center;
  line-height: 1.25;
  border-bottom: 0.11em solid rgba(255, 255, 255, 0.38);
  transition: border-color 0.2s, color 0.2s;
}
.ls-slots .c.ok {
  color: #eafff8;
  border-bottom-color: transparent;
  text-shadow: 0 0 12px rgba(99, 230, 190, 0.5);
}
.ls-slots .c.ok.h {
  color: #ffe066;
}
.ls-slots .c.gh {
  color: rgba(255, 212, 59, 0.6);
  border-bottom-color: rgba(255, 212, 59, 0.5);
}
.ls-slots .c.pu {
  min-width: 0;
  margin: 0;
  border-bottom-color: transparent;
  color: rgba(255, 255, 255, 0.72);
}
.ls-slots .c.sp {
  min-width: 0.7ch;
}
.ls-slots .c.cur {
  border-bottom-color: var(--ta-gold);
  background: rgba(255, 212, 59, 0.16);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 6px 14px -6px rgba(255, 212, 59, 0.9);
  animation: ls-cur 1s ease-in-out infinite;
}
.ls-slots .c.cur.bad {
  color: #fff;
  background: rgba(255, 107, 107, 0.55);
  border-bottom-color: var(--ta-ng);
  box-shadow: 0 0 16px rgba(255, 107, 107, 0.8);
  animation: none;
}
@keyframes ls-cur {
  50% {
    background: rgba(255, 212, 59, 0.04);
    box-shadow: 0 6px 10px -8px rgba(255, 212, 59, 0.4);
  }
}
/* 打ち終わり：まちがえた語は赤、ヒントの語は金 */
.ls-card.done .ls-slots .c {
  border-bottom-color: transparent;
}
.ls-card.done .ls-slots .lw.mw .c:not(.pu) {
  color: #ffc9c9;
  border-bottom-color: rgba(255, 107, 107, 0.7);
  text-shadow: none;
}
.ls-card.done .ls-slots .lw.hw .c:not(.pu) {
  color: #ffe066;
  border-bottom-color: rgba(255, 212, 59, 0.6);
  text-shadow: none;
}
.ls-reveal[hidden] {
  display: none;
}
.ls-ja.ta-ja {
  margin: 0.5em auto 0;
  max-width: 48em;
  text-align: center;
  color: #d5efe8;
  font-size: calc(12px * var(--ui, 1) + 4px);
  line-height: 1.7;
}
.ls-src {
  margin: 0.35em 0 0;
  text-align: center;
  color: var(--ta-dim);
  font-size: calc(9px * var(--ui, 1) + 3px);
  font-weight: 700;
}
.ls-ctrl {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(4px * var(--ui, 1) + 4px);
  padding: 0 44px;
}
.ls-ctrl .ta-btn {
  font-size: calc(9px * var(--ui, 1) + 5px);
  padding: calc(4px * var(--ui, 1) + 3px) calc(10px * var(--ui, 1) + 5px);
  background: rgba(8, 22, 32, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ls-ctrl .ta-btn.primary {
  background: var(--gc);
  border-color: var(--gc);
  color: #032019;
}
.ls-ctrl .ta-btn[hidden] {
  display: none;
}
.ls-ctrl kbd {
  margin-left: 2px;
  padding: 1px 5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  font: 700 0.72em var(--mono);
  color: inherit;
}
@media (pointer: coarse) {
  .ls-ctrl kbd {
    display: none;
  }
}
/* 点のポップ */
.ls-pop {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 30%;
  translate: -50% 0;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
.ls-pop b {
  display: block;
  font: 900 calc(30px * var(--ui, 1) + 8px) / 1 var(--disp);
  letter-spacing: 0.08em;
  color: var(--c);
  text-shadow: 0 0 24px var(--c), 0 3px 0 rgba(0, 0, 0, 0.45);
}
.ls-pop small {
  display: block;
  margin-top: 2px;
  font: 900 calc(11px * var(--ui, 1) + 4px) var(--round);
  color: #fff;
}
.ls-pop span {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 12px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.45);
  font: 900 calc(12px * var(--ui, 1) + 4px) var(--disp);
  color: var(--ta-gold);
}
/* HUD */
.ls-story {
  max-width: min(34%, 320px);
}
.ls-story b {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Fraunces, Georgia, serif;
  font-weight: 800;
  letter-spacing: 0;
}
.ls-hard b {
  color: var(--ta-ng);
}
.ls-dots {
  display: inline-flex;
  gap: calc(3px * var(--ui, 1) + 2px);
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(8, 10, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ls-dots i {
  width: calc(6px * var(--ui, 1) + 4px);
  height: calc(6px * var(--ui, 1) + 4px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.3s, box-shadow 0.3s;
}
.ls-dots i.now {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(99, 230, 190, 0.6);
}
.ls-dots i.g-perfect {
  background: #ffd43b;
  box-shadow: 0 0 10px #ffd43b;
}
.ls-dots i.g-great {
  background: #63e6be;
}
.ls-dots i.g-good {
  background: #74c0fc;
}
.ls-dots i.g-clear {
  background: #b197fc;
}
.ls-none {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(90%, 460px);
  height: fit-content;
  padding: 24px;
  border-radius: 20px;
  text-align: center;
  background: rgba(8, 14, 36, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 700;
}
.ls-res-read {
  margin: 4px 0 0;
  text-align: center;
}
@media (max-width: 720px) {
  .ls-dots {
    display: none;
  }
  .ls-ctrl {
    padding: 0 40px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ls-slots .c.cur {
    animation: none;
  }
}

/* 多読タイピング（src/games/story.js）。本棚（カード）→ 本のページ（紙・インク・朗読・和訳） */

/* ---------- 本棚 ---------- */
.sp-pick {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 220, 160, 0.35) transparent;
  padding: calc(14px * var(--ui, 1) + 8px) calc(22px * var(--ui, 1) + 8px) calc(20px * var(--ui, 1) + 30px);
}
.sp-pick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: calc(10px * var(--ui, 1) + 6px);
}
.sp-eyebrow {
  margin: 0;
  font: 900 calc(9px * var(--ui, 1) + 3px) var(--disp);
  letter-spacing: 0.2em;
  color: var(--gc);
}
.sp-pick-ttl h3 {
  margin: 2px 0 0;
  font: 900 calc(22px * var(--ui, 1) + 6px) / 1.15 var(--round);
  color: #fff8e8;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.6);
}
.sp-pick-sub {
  margin: 4px 0 0;
  font-size: calc(10px * var(--ui, 1) + 3px);
  font-weight: 700;
  color: #d9c9ad;
}
.sp-pick-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sp-q {
  width: calc(170px * var(--ui, 1) + 60px);
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 220, 160, 0.3);
  background: rgba(20, 14, 8, 0.7);
  color: #fff;
  font: 700 max(16px, calc(11px * var(--ui, 1) + 4px)) var(--round);
  outline: none;
}
.sp-q:focus {
  border-color: var(--gc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 30%, transparent);
}
.sp-sort {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(20, 14, 8, 0.7);
  border: 1px solid rgba(255, 220, 160, 0.2);
}
.sp-sort button {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: none;
  color: #d9c9ad;
  font: 700 calc(10px * var(--ui, 1) + 4px) var(--round);
  white-space: nowrap;
}
.sp-sort button.on {
  background: var(--gc);
  color: #241a05;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--ui, 1) + 40px), 1fr));
  gap: calc(10px * var(--ui, 1) + 4px);
}
.sp-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border-radius: calc(12px * var(--ui, 1) + 4px);
  border: 1px solid rgba(255, 220, 160, 0.16);
  background: linear-gradient(170deg, rgba(48, 34, 20, 0.92), rgba(24, 17, 12, 0.94));
  color: #fff8e8;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sp-card:hover,
.sp-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gc);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.9), 0 0 24px -8px var(--gc);
  outline: none;
}
.sp-cimg {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--h, 30) 45% 32%), hsl(calc(var(--h, 30) + 50) 40% 18%));
}
.sp-cimg > i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(26px * var(--ui, 1) + 10px);
  font-style: normal;
  opacity: 0.55;
}
.sp-cimg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.sp-card:hover .sp-cimg > img {
  transform: scale(1.06);
}
.sp-badges {
  position: absolute;
  left: 6px;
  top: 6px;
  display: flex;
  gap: 4px;
}
.sp-badges em,
.sp-cont {
  font-style: normal;
  font: 900 calc(8px * var(--ui, 1) + 4px) / 1 var(--round);
  padding: 4px 7px;
  border-radius: 99px;
  background: rgba(10, 8, 4, 0.72);
  color: #fff;
  backdrop-filter: blur(4px);
}
.sp-badges em.dn {
  background: #2b8a3e;
}
.sp-badges em.rd {
  background: rgba(30, 80, 50, 0.85);
}
.sp-cont {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: var(--gc);
  color: #241a05;
}
.sp-cbody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(6px * var(--ui, 1) + 4px) calc(8px * var(--ui, 1) + 4px) calc(8px * var(--ui, 1) + 4px);
}
.sp-cbody b {
  font: 800 calc(11px * var(--ui, 1) + 4px) / 1.2 Fraunces, Georgia, serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-cbody small {
  font-size: calc(9px * var(--ui, 1) + 3px);
  font-weight: 700;
  color: #d9c9ad;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-cmeta {
  margin-top: 2px;
  font-size: calc(8px * var(--ui, 1) + 3px);
  font-weight: 700;
  color: #a8977a;
}
.sp-card.is-done .sp-cbody b::after {
  content: ' ✓';
  color: #69db7c;
}
.sp-empty {
  grid-column: 1 / -1;
  padding: 30px 10px;
  text-align: center;
  font-weight: 700;
  color: #d9c9ad;
}
.sp-more {
  margin-top: 14px;
  text-align: center;
}
.sp-more .ta-btn[hidden] {
  display: none;
}
/* つづきから？ */
.sp-ask {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 4, 0.6);
  backdrop-filter: blur(4px);
}
.sp-ask-in {
  width: min(92%, 440px);
  padding: 20px 22px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(160deg, #3a2a18, #1c140c);
  border: 1px solid rgba(255, 220, 160, 0.3);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  font-weight: 700;
  color: #fff8e8;
}
.sp-ask-t b {
  display: block;
  font: 800 18px Fraunces, Georgia, serif;
}
.sp-ask-t small {
  color: #d9c9ad;
}
.sp-ask-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.sp-ask-acts .ta-btn.primary {
  color: #241a05;
}

/* ---------- 本のページ ---------- */
.sp-book {
  position: absolute;
  inset: 0;
}
.sp-scroll {
  position: absolute;
  inset: calc(40px * var(--ui, 1) + 12px) 0 0;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 92%, transparent);
  mask-image: linear-gradient(transparent, #000 5%, #000 92%, transparent);
}
.sp-scroll::-webkit-scrollbar {
  display: none;
}
.sp-page {
  position: relative;
  width: min(92%, 860px);
  margin: calc(14px * var(--ui, 1) + 6px) auto 0;
  padding: calc(22px * var(--ui, 1) + 8px) calc(34px * var(--ui, 1) + 8px) calc(26px * var(--ui, 1) + 10px);
  border-radius: 6px 14px 14px 6px;
  background: radial-gradient(120% 80% at 50% 0%, #fffaf0 0%, #f8efdc 60%, #f1e4c8 100%);
  color: #2a2118;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 240, 210, 0.25), inset 22px 0 30px -26px rgba(110, 70, 20, 0.55), inset -2px 0 0 rgba(120, 90, 50, 0.15);
  font-family: Literata, Georgia, 'Times New Roman', serif;
}
.sp-hero {
  margin: calc(-22px * var(--ui, 1) - 8px) calc(-34px * var(--ui, 1) - 8px) calc(14px * var(--ui, 1) + 4px);
  aspect-ratio: 21 / 8;
  overflow: hidden;
  border-radius: 6px 14px 0 0;
  position: relative;
  background: linear-gradient(135deg, #c9a46a, #8a6a3a);
}
.sp-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, #fdf7ea 100%);
  pointer-events: none;
}
.sp-hero-none {
  aspect-ratio: 21 / 5;
  display: grid;
  place-items: center;
  font-size: 34px;
}
.sp-hero-none span {
  position: relative;
  z-index: 1;
  opacity: 0.6;
}
.sp-head {
  text-align: center;
  margin-bottom: calc(12px * var(--ui, 1) + 6px);
}
.sp-lv {
  margin: 0;
  font: 900 calc(8px * var(--ui, 1) + 3px) var(--disp);
  letter-spacing: 0.22em;
  color: #a8875a;
}
.sp-head h2 {
  margin: 6px 0 0;
  font: 800 calc(26px * var(--ui, 1) + 6px) / 1.12 Fraunces, Georgia, serif;
  color: #1f160d;
  letter-spacing: -0.01em;
}
.sp-jt {
  margin: 4px 0 0;
  font: 700 calc(11px * var(--ui, 1) + 4px) var(--round);
  color: #8a7558;
}
.sp-text {
  font-size: calc(16px * var(--ui, 1) + 5px);
  line-height: 1.85;
}
.sp-page.kid .sp-text {
  font-size: calc(20px * var(--ui, 1) + 6px);
  line-height: 1.9;
}
.sp-pg {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
.sp-para {
  margin: 0 0 0.35em;
  text-indent: 1.3em;
}
.sp-pg:first-child .sp-para {
  text-indent: 0;
}
.sp-s {
  transition: color 0.35s;
}
.sp-todo {
  color: #b9ab93;
}
.sp-done {
  color: #2a2118;
}
/* 今の文（TA.Target。games.css の .ta-type を紙の色に） */
.sp-text .sp-cur.ta-type {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: #6f624e;
  word-break: normal;
  background: linear-gradient(transparent 10%, rgba(255, 205, 60, 0.22) 10%, rgba(255, 205, 60, 0.22) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 3px;
}
.sp-text .sp-cur .ta-d {
  color: #2a2118;
  opacity: 1;
}
.sp-text .sp-cur .ta-r {
  color: #6f624e;
}
.sp-text .sp-cur .ta-c {
  color: #1b1408;
  background: #f5bf1a;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(245, 191, 26, 0.35);
  animation: sp-cur 1s ease-in-out infinite;
}
.sp-text .sp-cur .ta-m {
  text-decoration: underline wavy #e03131;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.sp-text .sp-cur.bad .ta-c {
  background: #ff6b6b;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.8);
  animation: none;
}
@keyframes sp-cur {
  50% {
    box-shadow: 0 0 0 4px rgba(245, 191, 26, 0.12);
  }
}
.sp-ja {
  margin: 0.15em 0 1em;
  padding: 0.55em 0.9em;
  border-left: 3px solid #e0b860;
  border-radius: 0 10px 10px 0;
  background: rgba(190, 140, 60, 0.09);
  font: 700 calc(11px * var(--ui, 1) + 4px) / 1.75 var(--round);
  color: #7a6345;
}
.sp-ja[hidden] {
  display: none;
}
.sp-spark {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  font-style: normal;
  font-size: 16px;
  color: #f0b40f;
  text-shadow: 0 0 8px rgba(255, 200, 40, 0.9);
}
.sp-endmark {
  margin: 1.4em 0 0;
  text-align: center;
  font: 800 calc(13px * var(--ui, 1) + 4px) Fraunces, Georgia, serif;
  letter-spacing: 0.3em;
  color: #cdbfa6;
  transition: color 0.6s;
}
.sp-endmark.on {
  color: #b07d12;
}
.sp-tail {
  height: 50%;
}

/* ---------- HUD ---------- */
.sp-hud {
  flex-wrap: nowrap;
  gap: 6px;
}
.sp-hud .ta-pill {
  flex: 0 0 auto;
}
.sp-hud .sp-hud-t {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 26%;
}
.sp-hud-t b {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Fraunces, Georgia, serif;
  font-weight: 800;
  letter-spacing: 0;
}
.sp-prog {
  flex: 1 1 auto;
  min-width: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.sp-prog .ta-meter {
  flex: 1;
  min-width: 30px;
}
.sp-prog .ta-meter i {
  background: linear-gradient(90deg, #ffd43b, #ffa94d);
}
.sp-prog small {
  font: 900 calc(9px * var(--ui, 1) + 3px) var(--disp);
  color: #fff3d6;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.sp-tg {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 5px 10px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 10, 36, 0.55);
  color: rgba(255, 255, 255, 0.55);
  font: 700 calc(10px * var(--ui, 1) + 3px) / 1.1 var(--round);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sp-tg[aria-pressed='true'] {
  background: color-mix(in srgb, var(--gc) 85%, transparent);
  border-color: var(--gc);
  color: #241a05;
}
.sp-tg.sp-bm {
  color: #fff;
}
.sp-res-links {
  margin: 4px 0 0;
  text-align: center;
}
@media (max-width: 720px) {
  .sp-hide-n {
    display: none;
  }
  .sp-page {
    width: 96%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-text .sp-cur .ta-c {
    animation: none;
  }
  .sp-card,
  .sp-cimg > img {
    transition: none;
  }
}

/* 絵文字を絵にする emo.js が 📖 を img.emo に変えるので、文字の大きさのままに（絵の上にかぶさらないように） */
.sp-cimg img.emo,
.sp-badges img.emo,
.sp-cont img.emo {
  position: static;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

/* ならべかえストーリー（src/games/puzzle.js）。字の大きさは cqw（ステージの幅の %）で、はみ出すときは JS が下げる */
.pz {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
  --ink: #fff;
  --glass: rgba(12, 14, 46, 0.58);
  --line: rgba(255, 255, 255, 0.22);
  --slot: rgba(255, 255, 255, 0.4);
}
.pz-day {
  --ink: #1c2449;
  --glass: rgba(255, 255, 255, 0.8);
  --line: rgba(28, 36, 73, 0.14);
  --slot: rgba(28, 36, 73, 0.32);
}
.pz > * {
  pointer-events: auto;
}
/* お話の名前：答えの箱の上のふちにのる札 */
.pz-src {
  position: absolute;
  z-index: 2;
  left: 7%;
  max-width: 70%;
  top: max(17.5%, 40px);
  translate: 0 -55%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.2em 0.9em;
  border-radius: 99px;
  background: var(--gc);
  color: #08223d;
  font: 800 max(10px, 1.35cqw) / 1.3 var(--round);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.25);
}

/* 答えの行 */
.pz-ans {
  position: absolute;
  left: 4%;
  right: 4%;
  top: max(17.5%, 40px);
  height: 21.5%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.15em 0.42em;
  padding: 0.55em 0.9em 0.35em;
  border-radius: 1.6cqw;
  background: var(--glass);
  border: 2px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1cqw 3cqw -1cqw rgba(0, 0, 0, 0.35);
  font: 800 var(--afs, 2.6cqw) / 1.3 var(--round);
  color: var(--ink);
  overflow: hidden;
  pointer-events: none;
  transition: box-shadow 0.4s, border-color 0.4s;
}
.pz-w {
  position: relative;
  white-space: nowrap;
  border-bottom: 0.1em solid transparent;
  padding: 0 0.04em;
}
.pz-w.empty {
  color: transparent;
}
.pz-guide .pz-w.empty {
  border-bottom: 0.1em dashed var(--slot);
}
.pz-w.given {
  opacity: 0.6;
}
.pz-w.on {
  color: var(--ink);
}
.pz-w.next::before {
  content: '';
  position: absolute;
  left: -0.14em;
  top: 0.12em;
  bottom: 0.12em;
  width: 0.1em;
  border-radius: 0.05em;
  background: var(--ta-gold);
  box-shadow: 0 0 0.4em var(--ta-gold);
  animation: pz-caret 1s steps(1) infinite;
}
@keyframes pz-caret {
  50% {
    opacity: 0;
  }
}
.pz-w.miss {
  color: #e8590c;
  text-decoration: underline wavy #ff6b6b;
  text-underline-offset: 0.2em;
}
.pz-ans.done {
  border-color: var(--ta-gold);
  box-shadow: 0 0 0 0.2cqw rgba(255, 212, 59, 0.5), 0 0 4cqw rgba(255, 212, 59, 0.55);
}
.pz-ans.done .pz-w {
  text-shadow: 0 0 0.5em rgba(255, 212, 59, 0.9);
}

/* のこり時間 */
.pz-time {
  position: absolute;
  left: 22%;
  right: 22%;
  top: calc(max(17.5%, 40px) + 22.6%);
  height: max(4px, 0.6cqw);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  pointer-events: none;
}
.pz-day .pz-time {
  background: rgba(28, 36, 73, 0.14);
}
.pz-time i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #63e6be, #74c0fc);
}
.pz-time.warn i {
  background: linear-gradient(90deg, #ff922b, #ffd43b);
}

/* カード */
.pz-pool {
  position: absolute;
  left: 3%;
  right: 3%;
  top: calc(max(17.5%, 40px) + 26%);
  bottom: max(19%, 50px);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: max(5px, 1cqw) max(6px, 1.2cqw);
  font-size: var(--fs, 3cqw);
  pointer-events: none;
}
.pz-pool[hidden],
.pz-done[hidden] {
  display: none;
}
.pz-card {
  position: relative;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  font: 800 1em/1.1 var(--round);
  color: #1b1e3c;
  min-width: 2.4em;
  min-height: 2.15em;
  padding: 0.5em 0.72em;
  border: 0;
  border-radius: 0.55em;
  background: var(--cc, #fff);
  box-shadow: 0 0.16em 0 rgba(27, 30, 60, 0.28), 0 0.45em 1em -0.2em rgba(0, 0, 0, 0.35);
  rotate: var(--r, 0deg);
  animation: pz-bob 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition: filter 0.15s, background-color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.pz-card span {
  pointer-events: none;
  white-space: nowrap;
}
.pz-card:hover {
  filter: brightness(1.05) saturate(1.2);
}
.pz-card:focus-visible {
  outline: 0.12em solid var(--ta-gold);
  outline-offset: 0.12em;
}
.pz-card i {
  position: absolute;
  top: -0.42em;
  left: -0.34em;
  font: 900 0.46em/1 var(--disp);
  font-style: normal;
  color: #fff;
  background: #2b2f5e;
  border: 0.12em solid #fff;
  border-radius: 99px;
  padding: 0.28em 0.46em;
  pointer-events: none;
}
.pz-card.used {
  visibility: hidden;
}
.pz-card.ng {
  background: #ffc9c9;
  box-shadow: 0 0 0 0.14em var(--ta-ng), 0 0 1em rgba(255, 107, 107, 0.7);
}
.pz-card.glow {
  animation: pz-glow 0.75s ease-in-out infinite alternate, pz-bob 3.2s ease-in-out infinite;
}
@keyframes pz-bob {
  50% {
    translate: 0 -0.12em;
  }
}
@keyframes pz-glow {
  from {
    box-shadow: 0 0 0 0.12em #ffd43b, 0 0 0.6em 0.15em rgba(255, 212, 59, 0.6);
  }
  to {
    box-shadow: 0 0 0 0.22em #fff3bf, 0 0 1.5em 0.5em rgba(255, 212, 59, 0.95);
  }
}
.pz-fly {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 0.3em;
  white-space: nowrap;
  font: 800 1em/1.1 var(--round);
  color: #1b1e3c;
  border-radius: 0.55em;
  box-shadow: 0 0 1em rgba(255, 212, 59, 0.8);
  pointer-events: none;
}

/* できた後 */
.pz-done {
  position: absolute;
  left: 7%;
  right: 7%;
  top: calc(max(17.5%, 40px) + 26%);
  bottom: max(19%, 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  text-align: center;
  font: 700 max(10px, 1.55cqw) / 1.4 var(--round);
  color: var(--ink);
}
.pz-from {
  margin: 0;
  font-weight: 900;
  font-size: 1.15em;
  padding: 0.3em 1em;
  border-radius: 99px;
  background: var(--glass);
  border: 1px solid var(--line);
}
.pz-from span {
  margin: 0 0.3em;
}
.pz-from a {
  color: #e64980;
  font-weight: 900;
  white-space: nowrap;
}
.pz-dusk .pz-from a,
.pz-night .pz-from a {
  color: #ffd43b;
}
.pz-tr {
  margin: 0;
  max-width: 46em;
  font-weight: 700;
  font-size: 0.92em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.pz-day .pz-tr {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
.pz-tr small {
  display: inline-block;
  font-size: 0.75em;
  padding: 0.05em 0.6em;
  margin-right: 0.5em;
  border-radius: 99px;
  background: var(--gc);
  color: #08102a;
  vertical-align: 0.1em;
}
.pz-acts {
  display: flex;
  gap: 0.6em;
  flex-wrap: wrap;
  justify-content: center;
}
.pz-acts .ta-btn {
  font-size: max(12px, 1.5cqw);
  padding: 0.55em 1.2em;
}
.pz-day .pz-acts .ta-btn:not(.primary) {
  color: #1c2449;
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(28, 36, 73, 0.2);
}
.pz-next {
  position: relative;
  overflow: hidden;
}
.pz-next i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.22em;
  width: 0;
  background: rgba(8, 16, 42, 0.55);
}

/* HUD */
.pz-hintbtn {
  font-size: calc(13px * var(--ui, 1) + 3px);
  padding: 0.4em 1em;
  background: rgba(255, 212, 59, 0.92);
  border-color: #ffd43b;
  color: #3b2a00;
  box-shadow: 0 0 18px -4px rgba(255, 212, 59, 0.8);
}
.pz-hintbtn:hover {
  background: #ffe066;
  color: #3b2a00;
}
.pz-hintbtn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
.pz-hintbtn kbd {
  font: 800 0.7em var(--disp);
  margin-left: 0.4em;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}
.pz-life {
  letter-spacing: 2px;
}
.pz-life span {
  display: inline-block;
  transition: transform 0.3s, opacity 0.3s;
}
.pz-life span:not(.on) {
  opacity: 0.55;
  transform: scale(0.85);
}
@media (prefers-reduced-motion: reduce) {
  .pz-card,
  .pz-card.glow {
    animation: none;
  }
  .pz-card.glow {
    box-shadow: 0 0 0 0.2em #ffd43b, 0 0 1em 0.3em rgba(255, 212, 59, 0.8);
  }
}

/* えほんクイズ（src/games/picture.js）。絵の枠の位置は JS が --fx --fy --fw --fh --fr --fb（%）で渡す。字は cqw（ステージの幅の %） */
.pq {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
  --ink: #f4f1ff;
  --sub: #c3c8f0;
  --btn: rgba(255, 255, 255, 0.09);
  --btn-b: rgba(255, 255, 255, 0.2);
}
.pq-kid {
  --ink: #2b1d4f;
  --sub: #6b5d8f;
  --btn: rgba(255, 255, 255, 0.92);
  --btn-b: rgba(43, 29, 79, 0.12);
}
.pq > * {
  pointer-events: auto;
}
.pq [hidden] {
  display: none !important;
}

/* 英文のページ（絵の枠の上） */
.pq-page {
  position: absolute;
  left: var(--fx, 3%);
  top: var(--fy, 12.5%);
  width: var(--fw, 58.5%);
  height: var(--fh, 58.5%);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 3% 6%;
  overflow: hidden;
  pointer-events: none;
}
.pq-sent {
  margin: 0;
  max-width: 100%;
  font: 700 3cqw/1.5 Fraunces, Georgia, serif;
  color: #3b2a14;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.pq-sent span {
  display: inline-block;
}

/* いまの点（枠の左上） */
.pq-live {
  position: absolute;
  left: calc(var(--fx, 3%) + 1.2%);
  bottom: calc(100% - var(--fb, 71%) + 2.5%);
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  padding: 0.25em 0.75em;
  border-radius: 99px;
  background: rgba(10, 8, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffe066;
  font-size: max(11px, 1.6cqw);
  pointer-events: none;
}
.pq-live b {
  font: 900 1.2em var(--disp);
  letter-spacing: 0.04em;
  min-width: 2.6em;
  text-align: right;
}
.pq-live small {
  font: 800 0.7em var(--round);
  color: #fff;
}
.pq-live.low {
  color: #ffa8a8;
}

/* 枠の下（点のバーと、問い・ヒント・最初の英文） */
.pq-clue {
  position: absolute;
  left: 12.5%;
  right: var(--fr, 38.5%);
  top: calc(var(--fb, 71%) + 2.6%);
  bottom: 2.5%;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  font: 700 max(10px, 1.45cqw) / 1.45 var(--round);
  color: var(--ink);
  pointer-events: none;
}
.pq-bar {
  flex: none;
  height: max(4px, 0.55cqw);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.pq-kid .pq-bar {
  background: rgba(43, 29, 79, 0.12);
}
.pq-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd43b, #ff8787);
}
.pq-txt {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pq-txt small {
  display: inline-block;
  font-size: 0.72em;
  padding: 0.05em 0.6em;
  margin-right: 0.45em;
  border-radius: 99px;
  background: var(--gc);
  color: #2b0a1c;
  vertical-align: 0.12em;
}
.pq-txt b {
  margin-right: 0.3em;
}
.pq-en {
  font: 700 1.08em/1.4 Fraunces, Georgia, serif;
}

/* 4つの答え */
.pq-ans,
.pq-card {
  position: absolute;
  left: calc(var(--fx, 3%) + var(--fw, 58.5%) + 3%);
  right: 3%;
  top: max(12.5%, 34px);
  bottom: max(10%, 50px);
}
.pq-ans {
  display: flex;
  flex-direction: column;
  gap: 1.8cqh;
}
.pq-a {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.8em 0.35em 0.5em;
  border-radius: 1.2cqw;
  border: 2px solid var(--btn-b);
  background: var(--btn);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: 800 max(10px, 1.55cqw) / 1.2 var(--round);
  overflow: hidden;
  box-shadow: 0 0.3em 0.8em -0.3em rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.25s, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pq-std .pq-a {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pq-a:hover:not(:disabled) {
  border-color: var(--c);
  filter: brightness(1.08);
}
.pq-a:focus-visible {
  outline: 3px solid var(--c);
  outline-offset: 2px;
}
.pq-a:disabled {
  cursor: default;
}
.pq-a i {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--c);
  color: #1b1533;
  font: 900 0.95em var(--disp);
  font-style: normal;
}
.pq-a span {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}
.pq-a b {
  font-size: 1.22em;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pq-a small {
  font-size: 0.78em;
  color: var(--sub);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pq-a b[lang='en'],
.pq-a small[lang='en'] {
  font-family: Fraunces, Georgia, serif;
}
.pq-ans.eq .pq-a b {
  font-size: 1.05em;
}
.pq-ans.eq .pq-a small {
  font-size: 0.95em;
}
.pq-a.ok {
  background: #2f9e44;
  border-color: #b2f2bb;
  color: #fff;
  box-shadow: 0 0 0 0.2em rgba(105, 219, 124, 0.5), 0 0 1.6em rgba(105, 219, 124, 0.7);
}
.pq-a.ok small {
  color: #ebfbee;
}
.pq-a.ng {
  background: #e03131;
  border-color: #ffc9c9;
  color: #fff;
}
.pq-a.ng small {
  color: #fff5f5;
}
.pq-a.dim {
  opacity: 0.35;
}

/* 答えのあとのカード */
.pq-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.9em 1.1em;
  border-radius: 1.4cqw;
  background: rgba(255, 253, 247, 0.97);
  color: #2b1d4f;
  border: 3px solid #69db7c;
  box-shadow: 0 1cqw 3cqw -1cqw rgba(0, 0, 0, 0.5);
  font: 700 max(10px, 1.35cqw) / 1.5 var(--round);
  overflow: hidden;
}
.pq-card.ng {
  border-color: #ff8787;
}
.pq-card p {
  margin: 0;
}
.pq-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  font-weight: 900;
  font-size: 1.3em;
  color: #2b8a3e;
}
.pq-card.ng .pq-h {
  color: #c92a2a;
}
.pq-h b {
  font: 900 1em var(--disp);
  color: #e67700;
}
.pq-t b {
  display: block;
  font: 800 1.25em/1.25 Fraunces, Georgia, serif;
}
.pq-t small {
  display: block;
  color: #6b5d8f;
  font-size: 0.95em;
}
.pq-sum {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  font-weight: 500;
  font-size: 0.95em;
  color: #3d3360;
}
.pq-acts {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}
.pq-acts .ta-btn {
  font-size: max(11px, 1.3cqw);
  padding: 0.5em 1em;
}
.pq-go {
  background: #fff0f6;
  border-color: #f783ac;
  color: #a61e4d;
}
.pq-go:hover {
  background: #ffdeeb;
  color: #a61e4d;
}
.pq-next {
  position: relative;
  overflow: hidden;
  margin-left: auto;
}
.pq-next i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.22em;
  width: 0;
  background: rgba(8, 16, 42, 0.5);
}

/* HUD のヒント */
.pq-hintbtn {
  font-size: calc(13px * var(--ui, 1) + 3px);
  padding: 0.4em 1em;
  background: rgba(255, 212, 59, 0.92);
  border-color: #ffd43b;
  color: #3b2a00;
  box-shadow: 0 0 18px -4px rgba(255, 212, 59, 0.8);
}
.pq-hintbtn:hover {
  background: #ffe066;
  color: #3b2a00;
}
.pq-hintbtn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
.pq-hintbtn kbd {
  font: 800 0.7em var(--disp);
  margin-left: 0.4em;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}

/* 結果画面：今回のお話の本棚 */
.pq-shelf > p {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 13px;
}
.pq-shelf > div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.pq-shelf a {
  flex: none;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.pq-shelf img {
  width: 120px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.pq-shelf a.ok img {
  border-color: #69db7c;
}
.pq-shelf a.ng img {
  border-color: #ff8787;
}
.pq-shelf a span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pq-shelf a:hover span {
  color: var(--gc);
}

/* ---------- ことば神経衰弱（src/games/memory.js） ----------
   すべてのゲームの CSS は1つの games.css につながるので、名前は mm- で始める。
   大きさは JS がステージの CSS px から決める（.mm-root の font-size が基準。カードは 1 枚ごとに font-size＝幅の 1/10） */
.mm-root {
  position: absolute;
  inset: 0;
  font-family: var(--round);
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}
.mm-root .mm-top {
  display: none;
}
.mm-root.narrow .mm-top {
  display: flex;
}
.mm-root.narrow .mm-panel {
  display: none;
}
/* せまい画面では一時停止のボタンを右上へ（右下のカードにかぶらないように） */
.ta-stage.mm-narrow.is-play .ta-pausebtn {
  top: 4px;
  bottom: auto;
  right: 4px;
  width: 32px;
  height: 32px;
  font-size: 11px;
}

/* 左右のパネル */
.mm-panel {
  position: absolute;
  z-index: 2; /* ふきだしがカードの上に出るように（飛んでいくカードは 30） */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 0.7em;
  border-radius: 1.2em;
  background: linear-gradient(180deg, rgba(4, 34, 27, 0.78), rgba(2, 16, 13, 0.82));
  border: 1px solid rgba(255, 212, 59, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow 0.35s, border-color 0.35s;
}
.mm-root.vs[data-turn='p'] .mm-p {
  border-color: rgba(116, 192, 252, 0.85);
  box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.35), 0 0 34px rgba(77, 171, 247, 0.45);
}
.mm-root.vs[data-turn='c'] .mm-c {
  border-color: rgba(255, 192, 120, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 169, 77, 0.35), 0 0 34px rgba(255, 169, 77, 0.45);
}
.mm-turn {
  font-weight: 900;
  font-size: 0.82em;
  padding: 0.25em 0.8em;
  border-radius: 99px;
  white-space: nowrap;
  opacity: 0.18;
  background: rgba(255, 255, 255, 0.08);
}
.mm-p .mm-turn {
  color: #a5d8ff;
}
.mm-c .mm-turn {
  color: #ffd8a8;
}
.mm-root[data-turn='p'] .mm-p .mm-turn,
.mm-root[data-turn='c'] .mm-c .mm-turn {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  animation: mm-blink 1.1s ease-in-out infinite alternate;
}
@keyframes mm-blink {
  to {
    filter: brightness(1.45);
  }
}
.mm-logo {
  margin: 0 0 0.2em;
  font-family: var(--disp);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  color: var(--ta-gold, #ffd43b);
  letter-spacing: 0.08em;
  font-size: 1.12em;
  text-shadow: 0 0 14px rgba(255, 212, 59, 0.5);
}
.mm-logo b {
  display: block;
}
.mm-stat {
  width: 100%;
  text-align: center;
  padding-top: 0.4em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mm-stat small,
.mm-ph {
  display: block;
  margin: 0;
  font-size: 0.74em;
  color: #a9dcc8;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.mm-stat b {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 1.4em;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.mm-bar {
  display: block;
  height: 0.45em;
  width: 86%;
  margin: 0.35em auto 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.mm-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd43b, #ffa94d);
  box-shadow: 0 0 10px rgba(255, 212, 59, 0.8);
  transition: width 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.mm-combo {
  min-height: 1.3em;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 1.05em;
  color: #ffd43b;
  text-shadow: 0 0 12px rgba(255, 170, 0, 0.8);
  white-space: nowrap;
}
.mm-name {
  margin: 0;
  font-weight: 900;
  font-size: 1em;
}
.mm-sc {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  line-height: 1;
}
.mm-sc b {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 2.3em;
}
.mm-p .mm-sc b {
  color: #a5d8ff;
}
.mm-c .mm-sc b {
  color: #ffd8a8;
}
.mm-sc small {
  font-size: 0.78em;
  color: #a9dcc8;
  font-weight: 700;
}
.mm-ava {
  width: 3.6em;
  height: 3.6em;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #a5d8ff, #1c5aa6 70%);
  box-shadow: 0 0 0 0.2em rgba(255, 255, 255, 0.18), 0 0.4em 1em rgba(0, 0, 0, 0.4);
}
.mm-ava span {
  font-size: 2.1em;
  line-height: 1;
}

/* はらだくん（フクロウ）とふきだし */
.mm-owl {
  position: relative;
  width: min(80%, 6.4em);
  aspect-ratio: 1;
  flex: none;
}
.mm-sp {
  display: block;
  width: 100%;
  height: 100%;
}
.mm-sp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.4em 0.6em rgba(0, 0, 0, 0.45));
  animation: mm-bob 2.6s ease-in-out infinite;
}
.mm-sp.emoji {
  display: grid;
  place-items: center;
  font-size: 3.4em;
  line-height: 1;
  animation: mm-bob 2.6s ease-in-out infinite;
}
.mm-sp.think img,
.mm-sp.think.emoji {
  animation: mm-think 0.9s ease-in-out infinite;
}
@keyframes mm-bob {
  50% {
    translate: 0 -6%;
  }
}
@keyframes mm-think {
  0%,
  100% {
    rotate: -7deg;
  }
  50% {
    rotate: 7deg;
  }
}
.mm-bubble {
  position: absolute;
  z-index: 40;
  display: none;
  right: 72%;
  top: 4%;
  padding: 0.45em 0.8em;
  border-radius: 1em;
  background: #fff;
  color: #3b2a12;
  font-weight: 900;
  font-size: 0.95em;
  white-space: nowrap;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.4);
  transform-origin: 100% 50%;
  pointer-events: none;
}
.mm-bubble::after {
  content: '';
  position: absolute;
  right: -0.45em;
  top: 50%;
  margin-top: -0.4em;
  border: 0.4em solid transparent;
  border-right: 0;
  border-left-color: #fff;
}
.mm-bubble.on {
  display: block;
}

/* せまい画面の上の帯 */
.mm-top {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 0.45em;
  white-space: nowrap;
}
.mm-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  height: 100%;
  box-sizing: border-box;
  padding: 0 0.75em;
  border-radius: 99px;
  background: rgba(3, 24, 19, 0.8);
  border: 1px solid rgba(255, 212, 59, 0.28);
}
.mm-pill i {
  font-style: normal;
}
.mm-pill small {
  font-size: 0.8em;
  color: #a9dcc8;
  font-weight: 700;
}
.mm-pill b {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 900;
}
.mm-root.vs[data-turn='p'] .mm-tp {
  border-color: #74c0fc;
  box-shadow: 0 0 12px rgba(77, 171, 247, 0.6);
}
.mm-root.vs[data-turn='c'] .mm-tc {
  border-color: #ffc078;
  box-shadow: 0 0 12px rgba(255, 169, 77, 0.6);
}
.mm-tturn {
  display: inline-block;
  font-weight: 900;
  color: #fff3bf;
  text-shadow: 0 0 8px rgba(255, 212, 59, 0.6);
}
.mm-towl {
  position: relative;
  width: 2.3em;
  height: 2.3em;
  margin: -0.4em 0 -0.4em -0.5em;
  flex: none;
}
.mm-towl .mm-sp.emoji {
  font-size: 1.6em;
}
.mm-towl .mm-bubble {
  right: 0;
  top: 120%;
  transform-origin: 80% 0;
}
.mm-towl .mm-bubble::after {
  right: 1em;
  top: -0.4em;
  margin: 0;
  border: 0.4em solid transparent;
  border-top: 0;
  border-bottom-color: #fff;
}

/* とったカードの山 */
.mm-pile {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.mm-mini {
  position: absolute;
  left: 7%;
  width: 86%;
  box-sizing: border-box;
  padding: 0.18em 0.55em;
  border-radius: 0.45em;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  overflow: hidden;
  background: linear-gradient(160deg, #fffdf6, #f1e4c2);
  color: #1d2552;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(232, 185, 49, 0.9), inset 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.mm-c .mm-mini {
  background: linear-gradient(160deg, #fff8ef, #ffe2c2);
}
.mm-mini b {
  font-family: Fraunces, Georgia, serif;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-mini small {
  font-size: 0.8em;
  font-weight: 700;
  color: #8a4b2a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- カード ---------- */
.mm-card {
  position: absolute;
  z-index: 1;
  perspective: 900px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: translate 0.18s;
}
.mm-card.is-up,
.mm-card.is-gone {
  cursor: default;
}
.mm-card.is-gone {
  z-index: 30;
  pointer-events: none;
}
@media (hover: hover) {
  .mm-card:not(.is-up):not(.is-gone):hover {
    translate: 0 -3%;
  }
  .mm-card:not(.is-up):hover .mm-back {
    filter: brightness(1.2) saturate(1.1);
  }
}
.mm-in {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.mm-face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: var(--r, 10px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* 裏：紺に金の格子と、まん中の金の星 */
.mm-back {
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 102, 0.3), transparent 40%), repeating-linear-gradient(45deg, rgba(255, 212, 59, 0.13) 0 1px, transparent 1px 0.62em),
    repeating-linear-gradient(-45deg, rgba(255, 212, 59, 0.13) 0 1px, transparent 1px 0.62em), linear-gradient(155deg, #3a2890 0%, #1c145c 50%, #0e0a38 100%);
  border: 0.17em solid #e8b931;
  box-shadow: inset 0 0 0 0.24em #150f48, inset 0 0 0 0.34em rgba(255, 212, 59, 0.75), 0 0.35em 0.8em rgba(0, 0, 0, 0.45);
  transition: filter 0.2s, box-shadow 0.2s;
}
.mm-cn {
  position: absolute;
  inset: 0.62em;
  border: 0.07em dashed rgba(255, 212, 59, 0.45);
  border-radius: calc(var(--r, 10px) * 0.6);
}
.mm-cn::before,
.mm-cn::after {
  content: '✦';
  position: absolute;
  color: #ffd43b;
  font-size: 1.15em;
  line-height: 1;
  font-style: normal;
  text-shadow: 0 0 0.4em rgba(255, 212, 59, 0.9);
}
.mm-cn::before {
  left: -0.5em;
  top: -0.55em;
}
.mm-cn::after {
  right: -0.5em;
  bottom: -0.55em;
}
.mm-ring {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.12em solid rgba(255, 212, 59, 0.7);
  box-shadow: 0 0 0 0.3em rgba(255, 212, 59, 0.1), inset 0 0 1em rgba(255, 212, 59, 0.28);
  filter: drop-shadow(0 0 0.25em rgba(255, 212, 59, 0.7));
}
.mm-ring::before {
  content: '';
  position: absolute;
  inset: 14%;
  background: linear-gradient(160deg, #fff6cf, #ffd43b 45%, #e09a0b);
  clip-path: polygon(50% 0%, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.5%, 50% 69.1%, 20.6% 90.5%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%);
}
.mm-ring::after {
  content: '';
  position: absolute;
  inset: -0.45em;
  border-radius: 50%;
  border: 0.06em solid rgba(255, 212, 59, 0.4);
}
.mm-sheen {
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.2) 50%, transparent 58%);
  animation: mm-sheen 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mm-sheen {
  0%,
  72% {
    translate: -45% 0;
  }
  100% {
    translate: 45% 0;
  }
}
/* 表：英語は青みの白・セリフ体、日本語は桃色がかった白・丸ゴシック */
.mm-front {
  transform: rotateY(180deg);
  padding: 0.35em;
  text-align: center;
}
.mm-card.en .mm-front {
  background: radial-gradient(circle at 50% 28%, #ffffff, #e9f0ff 58%, #d2e0ff);
  border: 0.16em solid #8fb3ff;
  box-shadow: inset 0 0 0 0.3em rgba(255, 255, 255, 0.75), inset 0 0 0 0.38em rgba(76, 110, 245, 0.35), 0 0.35em 0.8em rgba(0, 0, 0, 0.4);
  color: #1a2a6c;
}
.mm-card.ja .mm-front {
  background: radial-gradient(circle at 50% 28%, #fffdf8, #fff0e6 58%, #ffdcc8);
  border: 0.16em solid #ffaf87;
  box-shadow: inset 0 0 0 0.3em rgba(255, 255, 255, 0.75), inset 0 0 0 0.38em rgba(240, 120, 70, 0.35), 0 0.35em 0.8em rgba(0, 0, 0, 0.4);
  color: #6b2410;
}
.mm-txt {
  display: block;
  max-width: 100%;
  line-height: 1.12;
}
.mm-card.en .mm-txt {
  font-family: Fraunces, Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  overflow-wrap: normal;
}
.mm-card.ja .mm-txt {
  font-family: var(--round);
  font-weight: 900;
  overflow-wrap: anywhere;
  line-break: anywhere;
}
.mm-tag {
  position: absolute;
  top: 0.55em;
  left: 0.65em;
  font-style: normal;
  font-weight: 900;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  opacity: 0.5;
  line-height: 1;
}
.mm-card.en .mm-tag {
  font-family: var(--disp);
  color: #4263eb;
}
.mm-card.ja .mm-tag {
  color: #e8590c;
}
.mm-card.tiny .mm-tag,
.mm-card.tiny .mm-cn {
  display: none;
}
/* そろった・ちがった・はらだくんがねらう・キーボードで選んでいる */
.mm-card.is-match .mm-front {
  box-shadow: 0 0 0 0.25em #ffd43b, 0 0 1.6em 0.45em rgba(255, 212, 59, 0.85), inset 0 0 1em rgba(255, 212, 59, 0.5);
}
.mm-card.is-miss .mm-front {
  box-shadow: 0 0 0 0.22em #ff6b6b, 0 0 1.2em rgba(255, 80, 80, 0.65);
}
.mm-card.aim .mm-back {
  filter: brightness(1.3);
  box-shadow: inset 0 0 0 0.24em #150f48, inset 0 0 0 0.34em rgba(255, 212, 59, 0.75), 0 0 0 0.25em #ffa94d, 0 0 1.5em rgba(255, 169, 77, 0.95);
}
.mm-card.kfocus::after {
  content: '';
  position: absolute;
  inset: -0.4em;
  border-radius: calc(var(--r, 10px) + 0.35em);
  border: 0.22em solid #74c0fc;
  box-shadow: 0 0 1em rgba(116, 192, 252, 0.75);
  pointer-events: none;
  animation: mm-blink 0.8s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .mm-sheen,
  .mm-sp img,
  .mm-sp.emoji,
  .mm-turn {
    animation: none !important;
  }
}

/* ---------- 名探偵ワードサーチ（src/games/search.js） ----------
   すべてのゲームの CSS は1つの games.css につながるので、名前は ws- で始める。
   大きさは JS がステージの CSS px から決める（.ws-root の font-size が基準。盤のマス・カプセルは px） */
.ws-root {
  position: absolute;
  inset: 0;
  font-family: var(--round);
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}

/* 盤：古い紙の事件ファイル */
.ws-board {
  position: absolute;
  box-sizing: border-box;
  border-radius: 0.5em;
  background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.55), transparent 42%), radial-gradient(circle at 88% 92%, rgba(150, 105, 40, 0.22), transparent 52%),
    radial-gradient(circle at 70% 30%, rgba(160, 120, 60, 0.08), transparent 30%), linear-gradient(170deg, #f7edd2, #ead7a8);
  box-shadow: 0 1.4em 3em rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(90, 60, 20, 0.28), inset 0 0 3.2em rgba(130, 85, 25, 0.28);
  touch-action: none;
  cursor: crosshair;
}
/* クリップ */
.ws-clip {
  position: absolute;
  z-index: 4;
  left: 7%;
  top: -2.2em;
  width: 2.1em;
  height: 6.6em;
  box-sizing: border-box;
  border: 0.36em solid #c3c9d2;
  border-radius: 1.1em;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.ws-clip::after {
  content: '';
  position: absolute;
  left: 0.12em;
  right: 0.12em;
  top: 1.1em;
  bottom: -0.4em;
  border: 0.32em solid #aab1bb;
  border-top: 0;
  border-radius: 0 0 0.8em 0.8em;
}
.ws-grid {
  position: absolute;
  display: grid;
  font-family: var(--mono);
  font-weight: 800;
  color: #3a2914;
  user-select: none;
  -webkit-user-select: none;
}
.ws-c {
  display: grid;
  place-items: center;
  line-height: 1;
  border-right: 1px solid rgba(110, 75, 25, 0.08);
  border-bottom: 1px solid rgba(110, 75, 25, 0.08);
  transition: color 0.3s;
}
@media (hover: hover) {
  .ws-c:hover {
    background: rgba(255, 255, 255, 0.4);
  }
}
.ws-c.got {
  color: #140b02;
}
.ws-c.anchor {
  border-radius: 50%;
  background: rgba(116, 192, 252, 0.55);
  box-shadow: inset 0 0 0 0.12em #1c7ed6;
  animation: ws-pulse 0.8s ease-in-out infinite alternate;
}
.ws-c.hint {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 212, 59, 0.95), rgba(255, 212, 59, 0.15) 72%);
  animation: ws-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes ws-pulse {
  to {
    filter: brightness(1.25);
    box-shadow: 0 0 0.6em rgba(255, 190, 40, 0.9);
  }
}

/* カプセル（ドラッグ中・見つけた・ちがう） */
.ws-caps,
.ws-over {
  position: absolute;
  pointer-events: none;
}
.ws-cap {
  position: absolute;
}
.ws-cap[hidden] {
  display: none;
}
.ws-cap-in {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-sizing: border-box;
}
.ws-sel .ws-cap-in {
  background: rgba(77, 171, 247, 0.28);
  border: 0.16em solid rgba(28, 126, 214, 0.8);
  box-shadow: 0 0 0.8em rgba(77, 171, 247, 0.5);
}
.ws-got {
  mix-blend-mode: multiply;
}
.ws-got .ws-cap-in {
  background: color-mix(in srgb, var(--c) 70%, transparent);
  border: 0.1em solid color-mix(in srgb, var(--c) 80%, #000);
}
.ws-bad .ws-cap-in {
  background: rgba(255, 90, 90, 0.38);
  border: 0.16em solid rgba(224, 49, 49, 0.85);
}

/* 虫めがね */
.ws-lens {
  position: absolute;
  translate: -50% -50%;
  pointer-events: none;
}
.ws-lens i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
  border: 0.9em solid #9a7433;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.6), rgba(210, 235, 255, 0.12) 55%, rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 0 0.3em rgba(255, 220, 140, 0.55), 0 0.4em 1em rgba(0, 0, 0, 0.35);
  animation: ws-lens 1.1s ease-in-out infinite;
}
.ws-lens i::after {
  content: '';
  position: absolute;
  left: 92%;
  top: 92%;
  width: 3.4em;
  height: 1.3em;
  border-radius: 0.6em;
  background: linear-gradient(180deg, #7b4a1e, #4a2a0c);
  transform-origin: 0 50%;
  rotate: 45deg;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.35);
}
@keyframes ws-lens {
  50% {
    scale: 1.1;
  }
}

/* 「解決」のはんこ */
.ws-stamp {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: none;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.ws-stamp.on {
  display: block;
}
.ws-stamp span {
  display: block;
  padding: 0.08em 0.4em 0.12em;
  border: 0.07em solid #c92a2a;
  border-radius: 0.14em;
  box-shadow: inset 0 0 0 0.03em #fff, inset 0 0 0 0.06em #c92a2a;
  color: #c92a2a;
  font-family: var(--round);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  opacity: 0.9;
  rotate: -12deg;
}
.ws-stamp small {
  display: block;
  font-family: var(--disp);
  font-size: 0.26em;
  letter-spacing: 0.3em;
}

/* 右のパネル（事件・単語のリスト・虫めがね） */
.ws-side {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.8em 0.9em;
  border-radius: 1em;
  background: linear-gradient(180deg, rgba(30, 23, 44, 0.88), rgba(14, 11, 22, 0.92));
  border: 1px solid rgba(255, 214, 140, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1em 2.4em rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ws-case {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  flex: none;
}
.ws-owl {
  position: relative;
  width: 3.6em;
  height: 3.6em;
  flex: none;
}
.ws-sp {
  display: block;
  width: 100%;
  height: 100%;
}
.ws-sp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.3em 0.5em rgba(0, 0, 0, 0.5));
  animation: ws-bob 2.8s ease-in-out infinite;
}
.ws-sp.emoji {
  display: grid;
  place-items: center;
  font-size: 2.3em;
  line-height: 1;
}
@keyframes ws-bob {
  50% {
    translate: 0 -5%;
    rotate: -3deg;
  }
}
.ws-bubble {
  position: absolute;
  z-index: 10;
  left: 0.2em;
  top: 108%;
  display: none;
  padding: 0.45em 0.8em;
  border-radius: 1em;
  background: #fff8e6;
  color: #3b2a12;
  font-weight: 900;
  font-size: 0.92em;
  white-space: nowrap;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.45);
  transform-origin: 1.2em 0;
  pointer-events: none;
}
.ws-bubble::after {
  content: '';
  position: absolute;
  left: 1em;
  top: -0.4em;
  border: 0.4em solid transparent;
  border-top: 0;
  border-bottom-color: #fff8e6;
}
.ws-bubble.on {
  display: block;
}
.ws-ct {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.ws-ct small {
  font-family: var(--disp);
  font-size: 0.6em;
  letter-spacing: 0.14em;
  color: #e0b86a;
}
.ws-ct b,
.ws-ct i {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-ct b {
  font-weight: 900;
  color: #fff3d6;
}
.ws-ct i {
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-size: 0.82em;
  color: #d9c79e;
}
.ws-stat {
  display: flex;
  gap: 0.4em;
  flex: none;
  flex-wrap: wrap;
}
.ws-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.7em;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 214, 140, 0.18);
  white-space: nowrap;
}
.ws-pill i {
  font-style: normal;
  font-size: 0.9em;
}
.ws-pill b {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 900;
}
.ws-list {
  --cols: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-content: start;
  gap: 0.35em 0.5em;
}
.ws-w {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.28em 1.4em 0.3em 0.7em;
  border-radius: 0.5em;
  border-left: 0.3em solid var(--c);
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.4s;
}
.ws-w b {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #fff;
  transition: color 0.4s;
}
.ws-w b::after {
  content: '';
  position: absolute;
  left: -0.1em;
  right: 0;
  top: 50%;
  height: 0.14em;
  border-radius: 99px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.2, 1, 0.3, 1);
}
.ws-w small {
  font-size: 0.78em;
  font-weight: 700;
  color: #8a82a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-w.found {
  background: color-mix(in srgb, var(--c) 16%, transparent);
}
.ws-w.found b {
  color: rgba(255, 255, 255, 0.55);
}
.ws-w.found b::after {
  transform: scaleX(1);
}
.ws-w.found small {
  color: var(--c);
}
.ws-w.hinted::before,
.ws-w.found::before {
  position: absolute;
  right: 0.35em;
  top: 0.3em;
  font-size: 0.8em;
  line-height: 1;
}
.ws-w.hinted::before {
  content: '🔍';
}
.ws-w.found::before {
  content: '✔';
  color: var(--c);
  font-weight: 900;
}
.ws-foot {
  display: flex;
  align-items: center;
  flex: none;
}
.ws-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: max(2.5em, 30px);
  padding: 0.3em 0.95em;
  border-radius: 99px;
  border: 1.5px solid #e0b86a;
  background: linear-gradient(180deg, #5a3f1a, #2e1f0c);
  color: #ffe8b0;
  font: 900 1em var(--round);
  cursor: pointer;
  box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: filter 0.2s, translate 0.15s;
}
.ws-hint span {
  font-size: 1.2em;
  line-height: 1;
}
.ws-hint em {
  font-style: normal;
  font-family: var(--disp);
  color: #ffd43b;
}
@media (hover: hover) {
  .ws-hint:not(:disabled):hover {
    filter: brightness(1.2);
    translate: 0 -2px;
  }
}
.ws-hint:disabled {
  opacity: 0.4;
  cursor: default;
}
/* せまいパネル（スマホ）：字を減らす */
.ws-root.compact .ws-hint b {
  display: none;
}
.ws-root.compact .ws-pill {
  padding: 0.15em 0.5em;
}
.ws-root.compact .ws-w {
  padding: 0.2em 1.2em 0.22em 0.5em;
}
@media (prefers-reduced-motion: reduce) {
  .ws-sp img,
  .ws-lens i,
  .ws-c.hint,
  .ws-c.anchor {
    animation: none !important;
  }
}