:root {
  --ink: #3a2350;
  --ink-soft: #7a5c96;
  --panel: rgba(255, 255, 255, 0.9);
  --c1: #ff4d6d; --c1d: #c2294a;
  --c2: #2fbf6f; --c2d: #1d8a4e;
  --c3: #4d8bff; --c3d: #2d5ec2;
  --c4: #ffb703; --c4d: #c98a00;
  --c5: #a66bff; --c5d: #7442c9;
  --c6: #ff8a3d; --c6d: #c95f1a;
  --c7: #14b8a6; --c7d: #0d8074;
  --cs: 40px;
}

/* スマホでダブルタップ・ピンチしても画面が拡大しないように（スクロールはできる） */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y; }

/* hidden を付けたものは、ほかの display 指定があっても必ず消す（解放前のエンディングボタンなど） */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #2c1e5c;
  color: var(--ink);
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  font-weight: 800;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* 長押しで画像の保存メニューが出ないように */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- 背景（transform と opacity だけ動かすので軽い） ---------- */
#bg { position: fixed; inset: 0; overflow: hidden; background: #2c1e5c; }
.bg-layer {
  position: absolute;
  inset: -6%;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: transform, opacity;
  animation: kb0 15s linear forwards;
}
.bg-layer.show { opacity: 1; }
.bg-layer.kb0 { animation-name: kb0; }
.bg-layer.kb1 { animation-name: kb1; }
.bg-layer.kb2 { animation-name: kb2; }
.bg-layer.kb3 { animation-name: kb3; }
@keyframes kb0 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-3%, -2%); } }
@keyframes kb1 { from { transform: scale(1.12) translate(3%, 0); } to { transform: scale(1) translate(-2%, 1%); } }
@keyframes kb2 { from { transform: scale(1.04) translate(-3%, 2%); } to { transform: scale(1.14) translate(3%, -1%); } }
@keyframes kb3 { from { transform: scale(1.14) translate(0, -3%); } to { transform: scale(1.02) translate(0, 3%); } }

.bg-tint { position: absolute; inset: 0; transition: background 0.6s; }
body[data-screen='title'] .bg-tint { background: linear-gradient(180deg, rgba(255, 150, 200, 0.28), rgba(255, 170, 90, 0.38)); }
body[data-screen='menu'] .bg-tint,
body[data-screen='ranking'] .bg-tint,
body[data-screen='gallery'] .bg-tint,
body[data-screen='settings'] .bg-tint,
body[data-screen='allclear'] .bg-tint,
body[data-screen='versus'] .bg-tint,
body[data-screen='howto'] .bg-tint { background: linear-gradient(180deg, rgba(110, 170, 255, 0.35), rgba(170, 110, 255, 0.4)); }
body[data-screen='game'] .bg-tint,
body[data-screen='result'] .bg-tint { background: linear-gradient(180deg, rgba(30, 18, 70, 0.6), rgba(16, 36, 84, 0.72)); }

.bg-bubbles span {
  position: absolute;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0 12%, var(--c) 40%, transparent 72%);
  opacity: 0.45;
  will-change: transform;
  animation: rise 20s linear infinite;
}
body[data-screen='game'] .bg-bubbles span { opacity: 0.22; }
@keyframes rise { to { transform: translate(var(--dx), -125vh); } }

@media (prefers-reduced-motion: reduce) {
  .bg-layer, .bg-bubbles span { animation: none !important; }
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.screen.active { display: flex; animation: fade-in 0.25s ease-out; }

@keyframes fade-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

.panel {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 24px;
  background: var(--panel);
  border: 4px solid #fff;
  border-radius: 28px;
  box-shadow: 0 12px 0 rgba(58, 35, 80, 0.25), 0 20px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.wide-panel { max-width: 640px; }

h2 {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.hint { color: var(--ink-soft); font-size: 14px; font-weight: 500; margin: 0 0 14px; }

/* ---------- ボタン ---------- */
.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  color: #fff;
  background: var(--bc, var(--c3));
  box-shadow: 0 6px 0 var(--bd, var(--c3d));
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.menu-btn:hover { filter: brightness(1.08); }
.menu-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--bd, var(--c3d)); }
.menu-btn:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.menu-title { font-size: 22px; font-weight: 900; letter-spacing: 0.04em; }
.menu-sub { font-size: 13px; font-weight: 500; opacity: 0.95; margin-top: 2px; }
.menu-sub b { font-weight: 900; }
.c1 { --bc: var(--c1); --bd: var(--c1d); }
.c2 { --bc: var(--c2); --bd: var(--c2d); }
.c3 { --bc: var(--c3); --bd: var(--c3d); }
.c4 { --bc: var(--c4); --bd: var(--c4d); }
.c5 { --bc: var(--c5); --bd: var(--c5d); }
.c6 { --bc: var(--c6); --bd: var(--c6d); }
.c7 { --bc: var(--c7); --bd: var(--c7d); }

.menu-row { display: flex; gap: 12px; align-items: center; }
.menu-row .half { flex: 1; }
.menu-row .link-btn { flex: 1; }

.link-btn {
  background: none;
  border: none;
  padding: 8px;
  color: var(--ink-soft);
  font-size: 15px;
  text-decoration: underline;
}
.link-btn:focus-visible { outline: 3px solid var(--ink); border-radius: 8px; }
.link-btn.danger { color: #c2294a; }

/* ---------- タイトル ---------- */
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: auto; }
.logo { width: min(86vw, 640px); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.12)); animation: float 3s ease-in-out infinite; }
.logo-small { width: min(70vw, 300px); margin: -6px auto 10px; display: block; animation: none; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-1deg); } }

.title-faces { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.face-chip {
  width: clamp(48px, 12vw, 76px);
  height: clamp(48px, 12vw, 76px);
  border-radius: 50%;
  border: 5px solid var(--ring, #fff);
  object-fit: cover;
  background: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
  animation: bounce 1.2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40% { transform: translateY(-18px) scale(0.95, 1.05); }
  70% { transform: translateY(0) scale(1.08, 0.92); }
}

.start-btn {
  margin-top: 8px;
  padding: 14px 40px;
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 900;
  color: #fff;
  background: var(--c1);
  border: 4px solid #fff;
  border-radius: 999px;
  box-shadow: 0 7px 0 var(--c1d);
  letter-spacing: 0.08em;
  animation: blink 1.4s ease-in-out infinite;
}
.start-btn:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
@keyframes blink { 50% { transform: scale(1.06); } }
.small-note { margin: 0; color: #fff; font-size: 14px; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

/* ---------- ゲーム画面 ---------- */
#screen-game { flex-direction: column; gap: 10px; padding: 8px; }
.game-layout { display: flex; align-items: flex-start; gap: calc(var(--cs) * 0.3); }

.field-wrap {
  position: relative;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  background: #1c1440 center / cover no-repeat;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25), 0 0 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#field { display: block; }
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.side { width: calc(var(--cs) * 2.6); min-width: 84px; display: flex; flex-direction: column; gap: calc(var(--cs) * 0.2); }
.side-box {
  background: var(--panel);
  border: 3px solid #fff;
  border-radius: 12px;
  padding: calc(var(--cs) * 0.08) calc(var(--cs) * 0.15);
  text-align: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
.next-box canvas { display: block; margin: 0 auto; }
.side-label { font-size: max(11px, calc(var(--cs) * 0.26)); font-weight: 900; color: var(--ink-soft); letter-spacing: 0.08em; }
.side-value { font-size: max(14px, calc(var(--cs) * 0.46)); font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.side-value small { font-size: 0.55em; color: var(--ink-soft); }
.side-value.score { font-size: max(13px, calc(var(--cs) * 0.4)); word-break: break-all; }
.side-value.warn { color: var(--c1); animation: blink 0.5s infinite; }

.field-col { display: flex; flex-direction: column; gap: 4px; }

/* ---------- 対戦 ---------- */
/* スマホ縦：相手の盤面を右の列に入れるので、列を広げて「れんしょう」は省く（結果画面で見られる） */
#screen-game[data-playing='versus']:not(.wide) .side { width: calc(var(--cs) * 3); }
#screen-game:not(.wide) .vs-streak { display: none; }
.opp-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#screen-game.wide .opp-box { margin-left: calc(var(--cs) * 0.2); }
/* 横ならびのときは、名前を盤面の下に出して 自分と相手の盤面の高さをそろえる */
#screen-game.wide .opp-head { order: 3; width: auto; max-width: 100%; padding: 4px 12px; font-size: 16px; }
#screen-game.wide .opp-head img { width: 30px; height: 30px; }
#screen-game.wide .opp-field-wrap { border-width: 4px; border-radius: 14px; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25), 0 0 30px rgba(0, 0, 0, 0.35); }
.opp-head {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 2px 4px;
  background: var(--panel);
  border: 2px solid #fff;
  border-radius: 10px;
  font-size: max(11px, calc(var(--cs) * 0.5));
  white-space: nowrap;
}
.opp-head img {
  width: max(18px, calc(var(--cs) * 1));
  height: max(18px, calc(var(--cs) * 1));
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.opp-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.opp-head small { flex-shrink: 0; color: var(--ink-soft); font-size: 0.85em; }
.opp-field-wrap { border-width: 3px; border-radius: 8px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }

/* おじゃまぷよの予告（小=1, 大=6, 岩=30, 星=180, 月=360, 王冠=720） */
.ojama-bar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: max(10px, calc(var(--cs) * 0.7));
}
.oj {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #c9c9d3 var(--oj-img, none) center / cover no-repeat;
  filter: grayscale(1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.oj.small { width: calc(var(--cs) * 0.42); height: calc(var(--cs) * 0.42); border-width: 1px; }
.oj.big { width: calc(var(--cs) * 0.66); height: calc(var(--cs) * 0.66); }
.oj.rock { width: calc(var(--cs) * 0.66); height: calc(var(--cs) * 0.66); border-radius: 26%; background: #6f6f7c; }
.oj.star, .oj.moon, .oj.crown {
  width: auto;
  height: auto;
  border: none;
  background: none;
  box-shadow: none;
  filter: none;
  font-size: calc(var(--cs) * 0.62);
  line-height: 1;
}
.oj.star::after { content: '⭐'; }
.oj.moon::after { content: '🌙'; }
.oj.crown::after { content: '👑'; }

.pause-btn {
  align-self: center;
  width: calc(var(--cs) * 1.2);
  height: calc(var(--cs) * 1.2);
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--c5);
  color: #fff;
  font-size: max(14px, calc(var(--cs) * 0.4));
  font-weight: 900;
  box-shadow: 0 4px 0 var(--c5d);
}

.touch-pad { display: none; }
@media (hover: none) and (pointer: coarse) {
  .touch-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 0.3fr repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 520px;
    touch-action: none;
  }
  .touch-pad button:nth-child(4) { grid-column: 5; }
}
.touch-pad button {
  height: 62px;
  border: 3px solid #fff;
  border-radius: 16px;
  background: rgba(77, 139, 255, 0.92);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 5px 0 var(--c3d);
  touch-action: none;
}
.touch-pad button.t-rot { background: rgba(255, 77, 109, 0.92); box-shadow: 0 5px 0 var(--c1d); }
.touch-pad button.t-hard { background: rgba(166, 107, 255, 0.92); box-shadow: 0 5px 0 var(--c5d); }
.touch-pad button.on { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); filter: brightness(1.15); }

/* 演出 */
.banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: calc(var(--cs) * 0.95);
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: calc(var(--cs) * 0.06) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--cs) * 0.08) 0 rgba(0, 0, 0, 0.3);
  animation: banner 1.3s ease-out forwards;
}
.banner.ready { color: var(--c4); }
.banner.go { color: var(--c2); animation-duration: 0.7s; }
.banner.allclear { color: var(--c4); font-size: calc(var(--cs) * 1.05); animation-duration: 1.8s; }
.banner.over { color: var(--c1); animation: banner-stay 2s ease-out forwards; }
.banner.over.clear { color: var(--c4); }
.banner.over.win { color: var(--c2); }
@keyframes banner {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}
@keyframes banner-stay {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  35%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.chain-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: chain-pop 1.1s ease-out forwards;
  white-space: nowrap;
}
.chain-pop img {
  width: calc(var(--cs) * var(--k, 1));
  height: calc(var(--cs) * var(--k, 1));
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
}
.chain-pop span {
  font-size: calc(var(--cs) * 0.5 * var(--k, 1));
  font-weight: 900;
  color: var(--chain-color, #fff);
  -webkit-text-stroke: calc(var(--cs) * 0.05) var(--ink);
  paint-order: stroke fill;
}
@keyframes chain-pop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  25% { transform: translate(-50%, -70%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -90%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -130%) scale(1); opacity: 0; }
}

.cutin {
  position: absolute;
  inset: 30% -10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cs) * 0.3);
  background: linear-gradient(90deg, transparent, rgba(255, 77, 109, 0.85) 20%, rgba(255, 183, 3, 0.85) 80%, transparent);
  transform: skewY(-8deg);
  animation: cutin 1.4s ease-out forwards;
}
.cutin img { width: calc(var(--cs) * 2.2); height: calc(var(--cs) * 2.2); border-radius: 50%; border: 4px solid #fff; object-fit: cover; }
.cutin span { font-size: calc(var(--cs) * 0.8); color: #fff; -webkit-text-stroke: calc(var(--cs) * 0.05) var(--ink); paint-order: stroke fill; font-weight: 900; }
@keyframes cutin {
  0% { transform: skewY(-8deg) translateX(100%); }
  20%, 75% { transform: skewY(-8deg) translateX(0); }
  100% { transform: skewY(-8deg) translateX(-100%); opacity: 0; }
}

/* ---------- モーダル ---------- */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 10, 40, 0.6);
  z-index: 10;
}
.modal[hidden] { display: none; }
.modal-panel { max-width: 340px; }

/* ---------- リザルト ---------- */
.result-panel h2 { font-size: 30px; }
.result-face {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 5px solid var(--c4);
  object-fit: cover;
  animation: bounce 1.2s ease-in-out infinite;
}
.result-mode { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.result-score { font-size: 52px; font-weight: 900; color: var(--c1); line-height: 1.1; margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.result-score small { font-size: 18px; color: var(--ink-soft); margin-left: 4px; }
.result-score.text { font-size: 36px; }
.result-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.result-stats div {
  flex: 1;
  background: rgba(166, 107, 255, 0.12);
  border-radius: 14px;
  padding: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
}
.result-stats b { font-size: 26px; color: var(--ink); }
.rankin { margin-bottom: 14px; }
.rankin-msg { margin: 0 0 8px; color: var(--c1d); }
.rankin-msg b { font-size: 22px; }
.name-form { display: flex; gap: 8px; }
.name-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 18px;
  padding: 10px 12px;
  border: 3px solid var(--c5);
  border-radius: 14px;
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.small-btn { width: auto; margin: 0; padding: 8px 16px; }
.small-btn .menu-title { font-size: 17px; }

/* ---------- ランキング ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tabs button {
  flex: 1;
  min-width: 0;
  padding: 10px 2px;
  white-space: nowrap;
  border: 3px solid var(--c3);
  border-radius: 14px;
  background: #fff;
  color: var(--c3);
  font-weight: 900;
}
.tabs button.active { background: var(--c3); color: #fff; }
.rank-sub { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.rank-list .pts.small { font-size: 16px; }
.rank-list .rank-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c3); display: block; margin: 0 auto; }

/* CPU たいせんの えらぶボタン（左に相手の顔） */
.vs-btn { position: relative; padding-left: 64px; padding-right: 20px; }
.vs-face {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  background: #fff;
}
.rank-list { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; }
.rank-list li {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: rgba(77, 139, 255, 0.08);
  border-radius: 12px;
}
.rank-list li.me { background: rgba(255, 183, 3, 0.35); }
.rank-list .pos { font-size: 20px; font-weight: 900; color: var(--c3); text-align: center; }
.rank-list li:nth-child(1) .pos { color: #e3a400; }
.rank-list li:nth-child(2) .pos { color: #8a96a8; }
.rank-list li:nth-child(3) .pos { color: #c47a3c; }
.rank-list .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .who small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.rank-list .pts { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rank-list .empty { display: block; text-align: center; color: var(--ink-soft); background: none; }

/* ---------- ずかん ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 4px;
}
.g-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 3px solid var(--c2);
  border-radius: 16px;
  background: #fff;
  transition: filter 0.2s, opacity 0.2s, transform 0.1s;
}
.g-card:active { transform: scale(0.96); }
.g-card:focus-visible { outline: 3px solid var(--ink); }
.g-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c2); }
.g-card .g-name { font-size: 12px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.g-card .g-count { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.g-card .g-flag { font-size: 12px; font-weight: 900; color: #fff; background: var(--c2); border-radius: 999px; padding: 1px 10px; }
.g-card.off { border-color: #ccc; filter: grayscale(1); opacity: 0.55; }
.g-card.off img { border-color: #ccc; }
.g-card.off .g-flag { background: #999; }

/* ---------- せってい ---------- */
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px dashed rgba(122, 92, 150, 0.25);
  text-align: left;
}
.setting:last-of-type { margin-bottom: 18px; }
.setting-name { font-size: 16px; }
.seg { display: flex; border: 3px solid var(--c5); border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.seg button { border: none; background: #fff; color: var(--c5); padding: 8px 12px; font-weight: 900; font-size: 14px; }
.seg button + button { border-left: 2px solid var(--c5); }
.seg button.active { background: var(--c5); color: #fff; }
.seg button:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
input[type='range'] { width: 50%; accent-color: var(--c5); touch-action: none; }

/* ---------- あそびかた ---------- */
.howto { text-align: left; }
.howto h2 { text-align: center; }
.howto p { font-weight: 500; line-height: 1.7; margin: 0 0 12px; }
.howto b { color: var(--c1); }
.x-mark { color: var(--c1); font-weight: 900; }
.keys { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.keys th, .keys td { padding: 6px 8px; border-bottom: 2px dashed rgba(122, 92, 150, 0.25); font-size: 15px; }
.keys th { text-align: left; white-space: nowrap; }
kbd {
  display: inline-block;
  min-width: 28px;
  padding: 2px 6px;
  margin: 1px 2px;
  border: 2px solid var(--ink-soft);
  border-bottom-width: 4px;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 480px) {
  .panel { padding: 18px 14px; border-radius: 22px; }
  h2 { font-size: 24px; }
  .menu-title { font-size: 19px; }
  .setting-name { font-size: 14px; }
  .seg button { padding: 7px 8px; font-size: 13px; }
}

.logo-text {
  margin: 0;
  font-size: clamp(48px, 12vw, 110px);
  font-weight: 900;
  color: #ff4d6d;
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
}

/* ---------- 最初の「タップしてはじめる」 ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 18, 70, 0.72);
  cursor: pointer;
  transition: opacity 0.35s;
}
.splash.closing { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; color: #fff; animation: blink 1.6s ease-in-out infinite; }
.splash-note {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--c1);
  border: 5px solid #fff;
  box-shadow: 0 7px 0 var(--c1d);
  font-size: 52px;
  line-height: 84px;
}
.splash p { margin: 0 0 6px; font-size: clamp(20px, 5vw, 28px); font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.splash small { font-size: 14px; font-weight: 500; opacity: 0.85; }

/* ---------- おんがく（クレジット） ---------- */
.music-note { font-size: 12px; opacity: 0.9; }
.splash-hint { display: block; margin-top: 10px; font-size: 12px; opacity: 0.75; }
.credits { text-align: left; }
.credits h2 { text-align: center; }
.credits-lead { margin: 0 0 14px; font-weight: 500; line-height: 1.6; text-align: center; }
.credit-list { display: grid; gap: 10px; margin-bottom: 16px; }
.credit-card {
  padding: 12px 14px;
  border: 3px solid var(--c7);
  border-radius: 16px;
  background: #fff;
}
.credit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credit-head b { font-size: 17px; font-weight: 900; }
.credit-role {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--c7);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.credit-card p { margin: 6px 0 8px; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ink-soft); }
.credit-link { font-size: 14px; font-weight: 900; color: var(--c7d); }
.credit-link:focus-visible, .big-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.credit-links { display: grid; gap: 10px; margin-bottom: 16px; }
.big-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background: var(--c3);
  box-shadow: 0 6px 0 var(--c3d);
}
.big-link.youtube { background: #ff2d2d; box-shadow: 0 6px 0 #b31414; }
.big-link.booth { background: var(--c6); box-shadow: 0 6px 0 var(--c6d); }
.big-link:active { transform: translateY(5px); box-shadow: none; }
.big-link-title { font-size: 19px; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.big-link-sub { font-size: 12px; font-weight: 500; opacity: 0.95; }

/* ---------- エンディング ---------- */
#screen-ending { padding: 0; background: #000; overflow: hidden; }
#screen-ending.active { display: block; animation: none; }
#ending-canvas { position: absolute; inset: 0; display: block; }
.ending-skip {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  opacity: 0.75;
}
.ending-skip:hover, .ending-skip:focus-visible { opacity: 1; outline: none; }