:root {
  --bg: #0b0710;
  --panel: #19121f;
  --panel-active: #2a1730;
  --text: #f5eefa;
  --muted: #a798b0;
  --accent: #ff3b2f;
  --accent2: #ffcc33;
  --wood: #dcb35c;
  --font-logo: 'Dela Gothic One', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-en: 'Black Ops One', 'Impact', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', system-ui, sans-serif;
  overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* アプリ内ブラウザで文字が勝手に大きくならないように */
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

#stage { height: 100%; }
#stage.shaking { animation: shake 70ms linear infinite; }
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(var(--shake), calc(var(--shake) * -0.6)) rotate(0.4deg); }
  50% { transform: translate(calc(var(--shake) * -0.8), var(--shake)) rotate(-0.4deg); }
  75% { transform: translate(calc(var(--shake) * 0.6), calc(var(--shake) * 0.3)) rotate(0.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

.screen { display: none; height: 100%; }
.screen.active { display: flex; }

/* ---------- タイトル ---------- */
#title {
  flex-direction: column; align-items: center; justify-content: flex-start; gap: 22px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 60, 30, 0.35), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(140, 30, 255, 0.35), transparent 60%),
    var(--bg);
}
.title-wrap { text-align: center; margin-top: auto; }
#title > :last-child { margin-bottom: auto; }
.logo {
  position: relative; margin: 0; font-family: var(--font-logo); font-weight: 400;
  font-size: clamp(48px, 13vw, 120px); line-height: 1.05; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff6c8 0%, #ffcc33 35%, #ff5a1f 65%, #b3001b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 70, 20, 0.8)) drop-shadow(0 4px 0 #3a0008);
  animation: logo-pulse 1.6s ease-in-out infinite;
}
.logo::before, .logo::after {
  content: attr(data-text); position: absolute; inset: 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; mix-blend-mode: screen;
}
.logo::before { background-image: linear-gradient(#ff0055, #ff0055); animation: glitch 2.4s infinite steps(1); }
.logo::after { background-image: linear-gradient(#00e5ff, #00e5ff); animation: glitch 2.4s 0.15s infinite steps(1) reverse; }
@keyframes glitch {
  0%, 86%, 100% { transform: translate(0); opacity: 0; clip-path: inset(0 0 0 0); }
  88% { transform: translate(-6px, 2px); opacity: 0.8; clip-path: inset(10% 0 55% 0); }
  91% { transform: translate(5px, -2px); opacity: 0.8; clip-path: inset(60% 0 8% 0); }
  94% { transform: translate(-3px, 1px); opacity: 0.8; clip-path: inset(35% 0 35% 0); }
}
@keyframes logo-pulse { 50% { filter: drop-shadow(0 0 32px rgba(255, 90, 20, 1)) drop-shadow(0 4px 0 #3a0008); } }
.logo { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.logo.shattered { visibility: hidden; }
.logo.shattered::before, .logo.shattered::after { display: none; }
.logo-shards { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.logo-shards span {
  position: absolute; display: block; text-align: center; font-family: var(--font-logo); white-space: pre;
  -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 100% 100%;
  filter: drop-shadow(0 0 10px rgba(255, 70, 20, 0.8)); will-change: transform;
}
.sublogo.jolt { animation: sub-jolt 0.6s ease-out; }
@keyframes sub-jolt {
  0% { transform: translate(0) rotate(0); }
  15% { transform: translate(-10px, 14px) rotate(-6deg); }
  35% { transform: translate(8px, 6px) rotate(4deg); }
  60% { transform: translate(-3px, 2px) rotate(-1.5deg); }
  100% { transform: translate(0) rotate(0); }
}
.sublogo {
  margin: 6px 0 0; font-family: var(--font-en); font-size: clamp(20px, 5vw, 40px);
  letter-spacing: 0.35em; color: #fff; text-shadow: 0 0 8px #ff3b2f, 0 0 22px #ff3b2f;
}

.big-btn {
  border: 0; border-radius: 999px; padding: 16px 56px; font-size: 22px; font-weight: 800; letter-spacing: 0.1em;
  background: linear-gradient(180deg, #ff6a3d, #d4001a); color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 8px 30px rgba(255, 40, 20, 0.6);
  transition: transform 0.1s;
}
.big-btn:active { transform: scale(0.95); }

.title-foot { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); margin: 0; }
.title-foot a { color: var(--accent2); }
.chip.locked { opacity: 0.45; }
.chip.soon { opacity: 0.55; border-style: dashed; }
.chip.online-chip { border-style: dashed; }
.chip.locked::after { content: '🔒'; font-size: 10px; font-weight: 700; margin-left: 2px; color: var(--muted); }

.options { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.options input { transform: scale(1.2); margin-right: 6px; accent-color: var(--accent); }
.rules {
  max-width: 520px; width: 100%; background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 12px 18px; font-size: 14px;
}
.rules h2 { margin: 0; font-size: 15px; color: var(--accent2); }
#title-rules .rp-tabs:first-child { margin-top: 6px; }
.preview { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.preview button {
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
  border-radius: 8px; padding: 6px 10px; font-size: 13px;
}

/* ---------- 対局画面 ---------- */
#game {
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  /* 下は少し広めに空ける（スマホのアプリ内で開くと、画面の一番下がホームバーなどに隠れることがあるため） */
  padding: max(8px, env(safe-area-inset-top)) 8px max(28px, env(safe-area-inset-bottom));
}
/* スマホのアプリの中（別の画面に埋め込まれた状態）で開いたとき：ページは戻るボタンの欄の下から始まるが、
   下のほうは画面の外にはみ出して作られるので、上に詰めて並べる */
.embedded #game { justify-content: flex-start; padding-top: 8px; padding-bottom: 8px; }
.player.thinking .p-name::after { content: '考え中…'; margin-left: 6px; font-size: 12px; color: var(--accent2); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
/* デストロイルールの HP */
.p-hp { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.hp-bar { width: 72px; flex: none; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #4cff7a, #c8ff4c); transition: width 0.4s ease-out; }
.p-hp.low .hp-fill { background: linear-gradient(90deg, #ff2b2b, #ff7a3d); }
.hp-carry { display: inline-flex; gap: 2px; margin-left: 2px; }
.hp-carry[hidden] { display: none; }
.hp-carry i { width: 9px; height: 9px; border-radius: 50%; opacity: 0.25; transition: opacity 0.2s; }
#p1 .hp-carry i { background: radial-gradient(circle at 35% 35%, #6b6b6b, #070707); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
#p2 .hp-carry i { background: radial-gradient(circle at 35% 35%, #fff, #c9c3b6); }
.hp-carry i.on { opacity: 1; }
.hp-carry.full i { opacity: 1; animation: carry-flash 0.5s ease-out; }
@keyframes carry-flash { 50% { transform: scale(1.5); box-shadow: 0 0 10px #5cff8a; } }
.hp-num { white-space: nowrap; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.player { position: relative; }
.dmg-pop {
  position: absolute; right: 18px; top: -6px; z-index: 5; pointer-events: none; white-space: nowrap;
  font-family: var(--font-logo); font-size: 26px; color: #ff3b3b; text-shadow: 0 0 8px #000, 0 2px 0 #3a0008;
  animation: dmg-pop 1.6s ease-out forwards;
}
.dmg-pop .tag { display: block; font-size: 13px; color: #ffd23f; text-align: right; }
.dmg-pop.recoil { color: #ff7a7a; font-size: 18px; }
.p-hp.shake { animation: hp-shake .4s; }
@keyframes hp-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.dmg-pop.heal { color: #5cff8a; font-size: 20px; }
.dmg-pop.critical { color: #ffd23f; font-size: 30px; }
.dmg-pop.ko { color: #fff; font-size: 34px; text-shadow: 0 0 12px #ff2b2b, 0 0 24px #ff2b2b; }
@keyframes dmg-pop { 0% { transform: translateY(10px) scale(1.6); opacity: 0; } 15% { transform: translateY(0) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
.top-bar { width: var(--ui-width, var(--board-size, 100%)); display: flex; height: 30px; }
.top-bar button {
  border: 1px solid rgba(255, 255, 255, 0.15); background: var(--panel); border-radius: 999px;
  padding: 4px 14px; font-size: 13px; font-weight: 700;
}
.top-bar button.accent { background: linear-gradient(180deg, #ff6a3d, #d4001a); border-color: transparent; }
.player {
  width: var(--ui-width, var(--board-size, 100%)); display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 14px; background: var(--panel);
  border: 2px solid transparent; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.player.active { background: var(--panel-active); border-color: var(--accent); box-shadow: 0 0 20px rgba(255, 59, 47, 0.45); }
.face #p2 { transform: rotate(180deg); }
.p-stone { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.p-stone.black { background: radial-gradient(circle at 35% 30%, #777, #000 70%); }
.p-stone.white { background: radial-gradient(circle at 35% 30%, #fff, #bdb7aa 80%); }
.p-info { flex: 1; min-width: 0; }
.p-name { font-weight: 800; font-size: 17px; white-space: nowrap; }
.p-cap { font-size: 12px; color: var(--muted); white-space: nowrap; }
.p-cap b { color: var(--accent2); font-size: 15px; }
.p-clock { position: relative; text-align: right; min-width: 108px; }
.time { font-family: var(--font-en); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.player.low .time { color: #ff4040; animation: blink 0.5s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.grace { height: 5px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.grace-bar { height: 100%; width: 0; background: linear-gradient(90deg, #39ff88, #ffe24a); }
.player.over-grace .grace { background: rgba(255, 50, 50, 0.6); }
.fx-hold .player.active .p-clock::after {
  content: '演出中・時計停止'; position: absolute; right: 0; bottom: -16px; font-size: 10px; font-weight: 700; color: var(--accent2); white-space: nowrap;
}
.face.fx-hold #p2.active .p-clock::after { bottom: auto; top: -16px; }
.delta {
  position: absolute; right: 0; top: -18px; font-family: var(--font-en); font-size: 18px;
  opacity: 0; pointer-events: none;
}
.delta.show { animation: delta-pop 1.2s ease-out; }
.delta.plus { color: #39ff88; text-shadow: 0 0 8px #39ff88; }
.delta.minus { color: #ff5050; text-shadow: 0 0 8px #ff5050; }
@keyframes delta-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.6); }
  20% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateY(-14px) scale(1); }
}
.face #p2 .delta { top: auto; bottom: -18px; }

#board-wrap { position: relative; width: var(--board-size); height: var(--board-size); flex: none; }
#board { width: 100%; height: 100%; display: block; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); touch-action: none; }
#own-1, #own-2, #board-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 6px; }
/* 盤全体が変化する演出（ULTRA 以上）では盤の色そのものも変える */
#board { transition: filter 1.4s ease-out; }
#board-wrap[data-bfx="ice"] #board { filter: hue-rotate(170deg) saturate(0.35) brightness(1.15); transition-duration: 0.4s; }
#board-wrap[data-bfx="fire"] #board { animation: board-heat 0.22s infinite alternate; }
#board-wrap[data-bfx="thunder"] #board { filter: hue-rotate(190deg) saturate(0.3) brightness(0.65); transition-duration: 0.2s; }
#board-wrap[data-bfx="light"] #board { filter: brightness(1.25) saturate(1.15) sepia(0.15); transition-duration: 0.3s; }
#board-wrap[data-bfx="dark"] #board { filter: brightness(0.55) saturate(0.6) hue-rotate(220deg); transition-duration: 0.3s; }
/* 色違いの演出（シーズン報酬）のときの盤の色 */
#board-wrap[data-bfx][data-bfxv="crimson"] #board { filter: sepia(1) hue-rotate(-40deg) saturate(3) brightness(0.4); }
#board-wrap[data-bfx="default"] #board { filter: sepia(0.3) saturate(1.3) brightness(0.75); transition-duration: 0.3s; }
@keyframes board-heat {
  from { filter: sepia(0.5) saturate(1.8) brightness(0.8) contrast(1.15); }
  to { filter: sepia(0.5) saturate(2.1) brightness(0.95) contrast(1.15); }
}
#pause-cover {
  position: absolute; inset: 0; display: none; flex-direction: column; gap: 20px;
  align-items: center; justify-content: center; border-radius: 6px;
  background: rgba(10, 6, 14, 0.94); font-size: 28px; font-weight: 800;
}
#pause-cover.show { display: flex; }
#toast {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8); padding: 10px 18px; border-radius: 10px; font-size: 15px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap;
}
#toast.show { opacity: 1; }
/* タイトルや設定の画面で出すお知らせ（対局画面では盤の上の #toast を使う） */
#gtoast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 40; width: max-content; max-width: calc(100% - 32px);
  background: rgba(0, 0, 0, 0.85); padding: 10px 18px; border-radius: 10px; font-size: 14px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#gtoast.show { opacity: 1; }
/* 音量 */
.vol-rows { display: flex; flex-direction: column; gap: 8px; }
.vol-rows label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.vol-rows input[type="range"] { flex: 1; max-width: 260px; accent-color: var(--accent); }
.vol-rows .vl { width: 3.5em; }
.vol-rows label button { flex: none; width: 38px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); font-size: 16px; }
.vol-rows label button[aria-pressed="true"] { background: rgba(255, 60, 40, 0.25); border-color: rgba(255, 90, 60, 0.6); }
.vol-rows span { width: 2.2em; text-align: right; color: var(--muted); font-size: 13px; }
#vol-pop {
  position: fixed; right: 12px; bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); z-index: 30; width: min(320px, calc(100% - 24px));
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
#vol-pop[hidden] { display: none; }
.vol-bgm-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.vol-bgm-pick .chips { flex: 1 0 100%; }
.vol-bgm-pick .chip { padding: 5px 10px; font-size: 13px; }
.vol-bgm-pick .chip.locked { display: none; } /* 対局中は、使える曲だけ並べる */
.bgm-now { color: #7fe3ff; font-size: 12px; font-weight: 700; margin-left: 6px; }
.top-bar #btn-rules { margin-left: auto; }
#log-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 32; width: min(440px, calc(100% - 24px)); max-height: 70vh;
  display: flex; flex-direction: column; border-radius: 14px; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
#log-pop[hidden] { display: none; }
#rules-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 34; /* オンラインの画面からも開くので、その上に */ width: min(480px, calc(100% - 24px)); max-height: 80vh;
  display: flex; flex-direction: column; border-radius: 14px; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
#rules-pop[hidden] { display: none; }
#rules-body { overflow-y: auto; padding: 4px 16px 16px; font-size: 14px; line-height: 1.7; }
.rules-body { line-height: 1.7; }
.rules-body h3 { font-size: 15px; color: var(--accent2); margin: 14px 0 6px; }
.rules-body h3 small { font-size: 12px; color: var(--muted); font-weight: 400; }
.rules-body b { color: var(--accent2); }
.rp-list { margin: 8px 0 0; padding-left: 18px; }
.rp-tabs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rp-tabs button { flex: 1; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; border-radius: 999px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rp-tabs button[aria-selected="true"] { background: var(--accent); border-color: transparent; color: #fff; }
.rp-sizes button[aria-selected="true"] { background: #3a2a60; border-color: #8a6aff; }
.rp-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.rp-table th { text-align: left; font-weight: 700; color: var(--muted); padding: 5px 8px 5px 0; white-space: nowrap; vertical-align: top; }
.rp-table td { padding: 5px 0; font-weight: 700; }
.rp-table tr + tr { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rp-note { color: var(--muted); font-size: 13px; }
.rp-words { margin: 0; }
.rp-words dt { font-weight: 800; margin-top: 8px; color: #fff; }
.rp-words dd { margin: 2px 0 0; color: #ddd; font-size: 13px; }
.rp-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.rp-name { font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; }
.rp-name span { color: #ffd23f; }
.rp-card p { margin: 2px 0 0; }
.rp-card .rp-ex { color: var(--muted); font-size: 12px; }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.log-head b { color: var(--accent2); font-size: 16px; }
.log-head button { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 4px 14px; font-weight: 700; }
#log-list { list-style: none; margin: 0; padding: 6px 12px 12px; overflow-y: auto; font-size: 14px; }
#log-hint { margin: 6px 14px 0; font-size: 12px; color: var(--muted); }
#log-hint[hidden] { display: none; }
.replaying #log-list li[data-move] { cursor: pointer; }
#log-list li.log-future { opacity: 0.4; } /* ハイライトでまだ再生していない手 */
#log-list li { display: grid; grid-template-columns: 4.2em 18px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); }
#log-list .p-stone { width: 16px; height: 16px; margin-top: 2px; }
#log-list .log-move { color: var(--muted); font-size: 12px; padding-top: 2px; }
#log-list b { color: #ff5a3c; font-size: 1.1em; }
#log-list small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
#log-list .log-crit b, #log-list .log-ko .log-text { color: #ffd23f; }
#log-list .log-heal b { color: #5cff8a; }
#log-list .log-recoil b { color: #ff7a7a; }
#log-list .log-final b { color: #ffb02e; }
#log-list .log-empty { display: block; color: var(--muted); text-align: center; border: 0; }
#share-pop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.75); padding: 16px; }
#share-pop[hidden] { display: none; }
#share-pop img, #share-pop video { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; margin-bottom: 14px; background: #000; }
#share-pop [hidden] { display: none; }
#m-rate { font-family: var(--font-logo); font-size: 22px; margin: 4px 0 8px; text-align: center; }
#m-rate:empty { display: none; }
#m-rate.up { color: #5cff8a; } #m-rate.down { color: #ff7a7a; }
#share-dmg-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 10px; font-size: 14px; font-weight: 700; }
#share-dmg-row input { transform: scale(1.2); accent-color: var(--accent); }
#share-redo { display: block; width: 100%; margin: 0 0 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 10px; font-weight: 700; }
#share-note { margin: -6px 0 10px; font-size: 12px; color: var(--muted); text-align: center; }
#share-note:empty { display: none; }
#rp-rec, #rp-speed, #rp-dmg { flex: 0 0 auto; padding: 10px 8px; }
#rp-dmg { font-size: 12px; }
#rp-dmg[aria-pressed="false"] { opacity: 0.6; }
#rp-speed { font-size: 12px; }
.recording #replay-controls button:not(#rp-rec):not(#rp-speed) { pointer-events: none; opacity: 0.35; }
/* 共有の動画を録っている間は、動画に映らない画面の揺れ・フラッシュ・周りが暗くなる演出を止めて軽くする（重いと絵が遅れて音とずれる） */
.rec-light #stage.shaking { animation: none; }
.rec-light #flash, .rec-light #vignette { display: none; }
.recording #rp-rec { background: #b3001b; color: #fff; animation: blink 1s steps(2) infinite; }
#share-pop .m-buttons a { flex: 1; border: 1px solid rgba(255, 255, 255, 0.15); background: var(--panel-active); border-radius: 10px; padding: 12px; font-weight: 700; color: #fff; text-decoration: none; font-size: 14px; }
#vol-mute { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px; font-weight: 700; }
/* 隠し演出を解放したときのお知らせ */
#unlock-pop {
  position: fixed; left: 50%; top: 18%; transform: translate(-50%, 0); z-index: 45; width: max-content; max-width: calc(100% - 32px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: none; opacity: 0;
  padding: 14px 22px; border-radius: 16px; background: rgba(10, 6, 16, 0.92); border: 2px solid var(--tc, #ffd23f);
  box-shadow: 0 0 30px color-mix(in srgb, var(--tc, #ffd23f) 70%, transparent);
}
#unlock-pop b { font-size: 20px; color: var(--tc, #ffd23f); text-shadow: 0 0 12px var(--tc, #ffd23f); }
#unlock-pop small { font-size: 13px; color: #ddd; }
#unlock-pop.show { animation: unlock-pop 4.2s ease-out forwards; }
@keyframes unlock-pop { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.7); } 8% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 14% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
#charge {
  position: absolute; left: 50%; top: 12%; transform: translate(-50%, 0); pointer-events: none; opacity: 0;
  font-family: var(--font-logo); font-size: clamp(26px, 8vw, 54px); color: #fff; white-space: nowrap;
  text-shadow: 0 0 10px var(--cc, #ff3b2f), 0 0 24px var(--cc, #ff3b2f), 0 3px 0 #3a0008;
}
/* 二眼完成！の表示（石を取ったときの演出より控えめ） */
#eyes {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, 0); pointer-events: none; opacity: 0; z-index: 4;
  font-family: var(--font-logo); font-size: clamp(34px, 10vw, 60px); color: #fff; white-space: nowrap;
  text-shadow: 0 0 10px var(--ec, #ffd23f), 0 0 22px var(--ec, #ffd23f), 0 3px 0 #000;
}
#eyes.show { animation: eyes-pop 2.2s ease-out forwards; }
/* デストロイルール：ダメージの計算式（盤の真ん中に大きく） */
#dmg-formula {
  position: fixed; left: 50%; top: 58%; transform: translate(-50%, 0); width: max-content; max-width: min(96vw, 520px);
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none; opacity: 0; z-index: 21;
  padding: 8px 14px; border-radius: 14px; background: rgba(8, 4, 14, 0.72);
}
#dmg-formula .f-tags {
  font-family: var(--font-logo); font-size: clamp(24px, 7vw, 44px); color: #ffd23f; line-height: 1.1;
  text-shadow: 0 0 10px #ff3b2f, 0 0 22px #ff3b2f, 0 3px 0 #000;
}
#dmg-formula .f-calc { font-size: clamp(14px, 4vw, 20px); font-weight: 800; color: #fff; text-shadow: 0 2px 0 #000; }
#dmg-formula .f-calc small { font-size: 0.72em; font-weight: 700; color: #ffd9a8; }
#dmg-formula .f-calc b { font-size: 1.35em; color: #ff5a3c; }
#dmg-formula .f-dmg { font-size: clamp(12px, 3.4vw, 15px); font-weight: 700; color: #ffb4a0; }
#dmg-formula .f-heal .f-tags, #dmg-formula.heal .f-tags { color: #7dffa4; text-shadow: 0 0 10px #0a7a30, 0 0 22px #2bff6a, 0 3px 0 #000; }
#dmg-formula .f-heal .f-calc b, #dmg-formula.heal .f-calc b { color: #5cff8a; }
#dmg-formula .f-heal .f-dmg, #dmg-formula.heal .f-dmg { color: #b8ffcc; }
#dmg-formula.show { animation: formula-pop 2.6s ease-out forwards; }
#dmg-formula.show.again { animation: formula-stay 2.6s ease-out forwards; } /* 反動を足したときは、跳ねずにそのまま延ばす */
@keyframes formula-stay { 0% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -10px); opacity: 0; } }
#dmg-formula .f-recoil { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.25); animation: recoil-in 0.35s ease-out; }
#dmg-formula .f-recoil .f-tags { color: #ff6a6a; text-shadow: 0 0 10px #7a0010, 0 0 22px #ff2b2b, 0 3px 0 #000; }
@keyframes recoil-in { 0% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes formula-pop {
  0% { transform: translate(-50%, 10px) scale(1.4); opacity: 0; } 8% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  80% { opacity: 1; } 100% { transform: translate(-50%, -10px); opacity: 0; }
}
@keyframes eyes-pop {
  0% { transform: translate(-50%, 8px) scale(1.5); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  75% { opacity: 1; } 100% { transform: translate(-50%, -14px); opacity: 0; }
}
#charge.show { --cc: #ff2b2b; opacity: 1; animation: charge-pop 0.25s ease-out, charge-shake 60ms linear 0.25s infinite; }
@keyframes charge-pop { 0% { transform: translate(-50%, 0) scale(2); opacity: 0; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes charge-shake { 50% { transform: translate(calc(-50% + 3px), -2px); } }

.controls { width: var(--ui-width, var(--board-size, 100%)); display: flex; gap: 6px; }
.controls button {
  flex: 1; border: 1px solid rgba(255, 255, 255, 0.15); background: var(--panel);
  border-radius: 10px; padding: 10px 4px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.controls button:active { background: var(--panel-active); }
.controls button:disabled { opacity: 0.35; }
#btn-mute, #btn-fs { flex: 0 0 48px; }
.sub-btn {
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06);
  border-radius: 999px; padding: 8px 20px; font-size: 14px; font-weight: 700;
}
.controls .accent, .m-buttons .accent { background: linear-gradient(180deg, #ff6a3d, #d4001a); border-color: transparent; }
#score-controls { display: none; align-items: center; flex-wrap: wrap; }
#score-controls .score-hint { flex: 1 0 100%; text-align: center; font-size: 13px; color: var(--accent2); }
.scoring #play-controls { display: none; }
.scoring #score-controls { display: flex; }
#preview-controls { display: none; align-items: center; flex-wrap: wrap; }
#preview-controls .score-hint { display: none; } /* 何を選んでいるかは下の欄の色でわかるので、説明の行は出さない */
.pv-row { flex: 1 0 100%; display: flex; gap: 4px; }
.controls .pv-row button { padding: 6px 2px; font-size: 12px; border-radius: 999px; white-space: nowrap; }
.controls .pv-row button[aria-pressed="true"] { background: var(--tc, var(--accent)); border-color: transparent; color: #fff; text-shadow: 0 1px 2px #000; }
.previewing #play-controls { display: none; }
/* チュートリアル */
#tut-controls { display: none; align-items: stretch; flex-wrap: wrap; }
.tutorial #play-controls { display: none; }
.tutorial #tut-controls { display: flex; }
.tutorial .p-clock, .tutorial #btn-log, .tutorial #btn-share { visibility: hidden; }
.tut-box { flex: 1 0 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 210, 63, 0.35); border-radius: 12px; padding: 8px 12px; text-align: left; }
.tut-box b { color: var(--accent2); font-size: 14px; }
.tut-box p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; height: 6.4em; overflow-y: auto; } /* 問題ごとに高さが変わって盤が動かないよう、高さを決めておく */
.tut-box p b { color: #ffd23f; font-size: inherit; }
.tut-ok { color: #8dffb0; }
#tut-controls button:disabled { opacity: 0.35; }
/* 棋譜の再生 */
#replay-controls { display: none; align-items: center; flex-wrap: wrap; }
#replay-controls .score-hint { flex: 1 0 100%; text-align: center; font-size: 13px; color: var(--accent2); }
.replaying #play-controls { display: none; }
.replaying #replay-controls { display: flex; }
.replaying #rp-auto { flex: 2; }
.replaying .p-clock { visibility: hidden; } /* 再生では時計を使わない */
.online-links { display: flex; gap: 8px; justify-content: center; width: min(460px, 100%); }
.online-btn { flex: 1; border: 1px solid rgba(255, 255, 255, 0.25); background: linear-gradient(180deg, #2b1b4a, #1a1030); border-radius: 12px; padding: 11px 8px; font-size: 15px; font-weight: 800; color: #fff; box-shadow: 0 0 14px rgba(138, 106, 255, 0.35); }
.online-btn:active { transform: scale(0.96); }
.online-btn { line-height: 1.25; font-size: 14px; }
.online-btn.locked { opacity: 0.45; box-shadow: none; }
.online-btn.locked::after { content: ' 🔒'; }
#online-body .on-title { font-size: 16px; font-weight: 800; color: var(--accent2); margin: 6px 0; }
.beginner[hidden] { display: none; }
.title-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.beginner {
  max-width: 520px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 10px 14px; border-radius: 14px; background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.35); font-size: 13px; line-height: 1.6;
}
.beginner b { color: var(--accent2); }
.m-sub { margin-top: 8px; }
.m-themes { margin: 0 0 14px; text-align: left; gap: 8px; }
.m-themes .tr-label { font-size: 13px; }
.m-themes .chip { padding: 4px 8px; font-size: 12px; }
.m-themes .chip .mk { width: 18px; height: 18px; font-size: 11px; }
.m-next { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; text-align: left; }
.m-next[hidden], .m-next .next-row[hidden] { display: none; }
.m-next .next-row { display: flex; flex-direction: column; gap: 6px; }
.m-next .tr-label { font-size: 13px; }
.m-next .chip { padding: 4px 8px; font-size: 12px; }
.m-themes .chip.locked { display: none; } /* 使えない演出は出さない */
.modal-box { max-height: calc(100vh - 32px); overflow-y: auto; }
#kifu-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 32; width: min(460px, calc(100% - 24px)); max-height: 75vh;
  display: flex; flex-direction: column; border-radius: 14px; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
#kifu-pop[hidden] { display: none; }
/* CPU 道場 */
/* 破壊の迷宮の入口：ひび割れた石の壁（レンガの目地＋ひび）・左右にたいまつ。「対局開始」より大きく目立たせる */
.dungeon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 128px; padding: 16px 64px; border-radius: 14px; cursor: pointer; overflow: hidden;
  color: #f5e6c8; font: inherit; text-align: center; border: 3px solid #4a3a2a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' opacity='.75'%3E%3Cpath d='M0 38 L34 44 L52 30 L80 41 L98 36' stroke-width='2.2'/%3E%3Cpath d='M52 30 L58 12 L70 0' stroke-width='1.6'/%3E%3Cpath d='M400 96 L366 90 L350 104 L322 98 L300 112 L288 140' stroke-width='2.4'/%3E%3Cpath d='M350 104 L344 122' stroke-width='1.5'/%3E%3Cpath d='M190 0 L196 18 L184 30 L192 46' stroke-width='1.8'/%3E%3Cpath d='M120 140 L128 122 L118 108 L134 96' stroke-width='1.8'/%3E%3Cpath d='M128 122 L146 126' stroke-width='1.2'/%3E%3Cpath d='M300 0 L294 16 L306 26' stroke-width='1.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffd9a0' stroke-linecap='round' opacity='.18' transform='translate(1 1)'%3E%3Cpath d='M0 38 L34 44 L52 30 L80 41 L98 36' stroke-width='1'/%3E%3Cpath d='M400 96 L366 90 L350 104 L322 98 L300 112 L288 140' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse at 12% 40%, rgba(255, 140, 40, 0.35), transparent 35%),
    radial-gradient(ellipse at 88% 40%, rgba(255, 140, 40, 0.35), transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 2px, transparent 2px 58px),
    linear-gradient(#3e3439, #1a1418);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 110, 30, 0.3); }
.dungeon-btn:active { transform: scale(0.98); }
.dg-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dg-text b { font-family: var(--font-logo); font-weight: 400; font-size: 34px; letter-spacing: 0.1em; color: #ffcf7a; text-shadow: 0 3px 0 #000, 0 0 12px rgba(255, 120, 30, 0.7); }
.dg-text small { font-size: 12px; color: #e8d2a8; }
.dg-go { margin-top: 4px; font-size: 14px; font-weight: 800; color: #1a0e00; background: linear-gradient(#ffd27a, #ff9a2a); padding: 5px 18px; border-radius: 999px; box-shadow: 0 0 12px rgba(255, 150, 40, 0.7); white-space: nowrap; }
/* たいまつ：壁に取り付けた木の柄と金具、その上でゆらぐ炎 */
.dg-torch { position: absolute; top: 50%; width: 10px; height: 46px; margin-top: -8px; border-radius: 3px 3px 5px 5px; background: linear-gradient(90deg, #3a2210, #7a4a24 50%, #3a2210); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.dg-torch.l { left: 24px; } .dg-torch.r { right: 24px; }
.dg-torch::before { content: ''; position: absolute; left: -4px; top: 2px; width: 18px; height: 7px; border-radius: 2px; background: linear-gradient(#8a8a92, #3a3a40); } /* 金具 */
.dg-torch::after { content: ''; position: absolute; left: -5px; top: -6px; width: 20px; height: 9px; border-radius: 50% 50% 4px 4px; background: radial-gradient(ellipse at 50% 30%, #6a3a1a, #2a1408); } /* 燃えている先 */
.dg-fire { position: absolute; left: 50%; bottom: 100%; width: 22px; height: 34px; margin: 0 0 2px -11px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff6c8 0 18%, #ffcf3a 32%, #ff7a1a 58%, rgba(255, 60, 0, 0) 72%);
  filter: drop-shadow(0 0 10px rgba(255, 140, 30, 0.95)); transform-origin: 50% 100%; animation: dg-flame 0.5s ease-in-out infinite alternate; }
.dg-torch.r .dg-fire { animation-delay: 0.25s; animation-duration: 0.6s; }
@keyframes dg-flame { 0% { transform: scale(1, 1) skewX(-3deg); opacity: 0.92; } 50% { transform: scale(0.92, 1.12) skewX(4deg); opacity: 1; } 100% { transform: scale(1.05, 0.94) skewX(-2deg); opacity: 0.88; } }
#dojo-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 33; width: min(460px, calc(100% - 24px)); max-height: 88vh; overflow-y: auto;
  border-radius: 14px; border: 2px solid #4a3a2a; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 0, 0, 0.8); padding-bottom: 14px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 24px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 52px), linear-gradient(#2a2228, #0e0a0e);
}
#dojo-pop[hidden] { display: none; }
#dojo-pop .sp-head b { font-family: var(--font-logo); font-weight: 400; color: #ffcf7a; text-shadow: 0 2px 0 #000, 0 0 8px rgba(255, 120, 30, 0.6); }
#dojo-pop .sp-head { padding: 12px 16px 4px; }
#dojo-body { padding: 0 14px; }
.dj-head { text-align: center; font-size: 14px; margin: 4px 0 10px; color: var(--muted); }
.dj-head b { color: var(--accent2); }
.dj-next-rule { justify-content: center; margin: 10px 0 0 !important; }
#dj-retry { display: block; margin: 6px auto 0; }
.dj-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.dj-rule span { margin-right: 2px; font-weight: 700; }
.dj-rule .chip { padding: 4px 9px; font-size: 12px; }
/* 階段を下りるように、下の階ほど暗く・少しずつ右へ */
.dj-floors { display: flex; flex-direction: column; gap: 6px; }
.dj-stage { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; overflow: hidden; text-align: left;
  margin-left: calc((var(--depth) - 1) * 4px); margin-right: calc((9 - var(--depth)) * 4px);
  background: linear-gradient(90deg, rgba(70, 56, 44, calc(0.95 - var(--depth) * 0.07)), rgba(14, 10, 10, 0.95)); border: 1px solid rgba(255, 220, 160, 0.14); color: var(--text); font: inherit; cursor: pointer; }
.dj-stage.next { border-color: var(--accent2); box-shadow: 0 0 12px rgba(255, 210, 63, 0.55); animation: dj-pulse 1.6s ease-in-out infinite; }
.dj-stage.boss { background: linear-gradient(90deg, #3a0a1e, #12040c); border-color: rgba(255, 60, 80, 0.6); }
.dj-stage.done { border-color: rgba(255, 150, 60, 0.35); }
@keyframes dj-pulse { 50% { box-shadow: 0 0 22px rgba(255, 210, 63, 0.9); } }
.dj-lv { font-family: 'Dela Gothic One', sans-serif; font-size: 18px; color: var(--accent2); min-width: 48px; }
.dj-name { flex: 1; font-size: 13px; font-weight: 800; display: flex; flex-direction: column; }
.dj-name small { font-size: 10px; font-weight: 600; color: #ffd9a0; }
.dj-st { font-size: 13px; color: var(--accent2); letter-spacing: 1px; white-space: nowrap; }
.dj-stage:not(.done) .dj-st { color: var(--muted); font-size: 11px; letter-spacing: 0; }
.dj-stage.next .dj-st { color: var(--accent2); font-weight: 800; }
.dj-stamp { position: absolute; top: 50%; right: 82px; transform: translateY(-50%) rotate(-12deg); font-style: normal; font-size: 11px; font-weight: 900; color: #ff3b2f;
  border: 2px solid #ff3b2f; border-radius: 6px; padding: 0 5px; opacity: 0.8; background: rgba(20, 0, 0, 0.4); }
/* 深淵層：紫と黒。迷宮の下に続く */
.dj-abyss-head { margin: 14px 0 8px; text-align: center; font-size: 14px; color: #c9a8ff; text-shadow: 0 0 10px rgba(150, 80, 255, 0.8); }
.dj-abyss-head b { font-family: var(--font-logo); font-weight: 400; font-size: 20px; color: #e0c8ff; }
.dj-abyss-head small { display: block; font-size: 11px; color: var(--muted); text-shadow: none; margin-top: 2px; }
.dj-abyss-lock { margin: 12px 0 0; padding: 10px; text-align: center; font-size: 13px; color: #9a88b0; border: 1px dashed rgba(150, 110, 220, 0.4); border-radius: 10px; background: rgba(20, 0, 40, 0.4); }
.dj-floors.abyss .dj-stage { background: linear-gradient(90deg, rgba(50, 20, 80, calc(0.95 - var(--depth) * 0.06)), rgba(6, 0, 12, 0.96)); border-color: rgba(170, 110, 255, 0.25); }
.dj-floors.abyss .dj-stage.done { border-color: rgba(200, 140, 255, 0.5); }
.dj-floors.abyss .dj-stage.boss { background: linear-gradient(90deg, #3a0a4a, #0a000e); border-color: rgba(220, 80, 255, 0.7); }
.dj-floors.abyss .dj-lv { color: #d8b8ff; }
.dj-hd { color: #b8a0d8 !important; }
.dj-abyss-open { color: #d8b8ff; }
.badge-f.badge-dojo.dj-ns { color: #fff2c0; background: linear-gradient(90deg, #8a4a00, #e09a1a, #8a4a00); border-color: #ffd27a; }
.dj-ns-card { display: block; margin: 6px auto 0; background: linear-gradient(#ffe27a, #e09a1a); color: #2a1400; border-color: #fff2b0; }
.on-titles { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 10px; font-size: 12px; }
.on-titles span { width: 100%; color: var(--muted); font-weight: 700; }
#online-body .on-titles .chip { width: auto; margin: 0; padding: 4px 10px; font-size: 12px; border-radius: 999px; }
.badge-f.badge-dojo.pi-1 { color: #2a1400; background: linear-gradient(90deg, #ffd23f, #fff6c8, #ffb02e, #ffd23f); background-size: 200% 100%; border-color: #fff2b0; animation: dj-shine 2.4s linear infinite; font-weight: 900; box-shadow: 0 0 8px rgba(255, 210, 63, 0.8); }
.badge-f.badge-dojo.pi-2 { color: #1a1c22; background: linear-gradient(90deg, #b8bcc6, #f4f6fa, #b8bcc6); border-color: #ffffff; font-weight: 800; }
.badge-f.badge-dojo.pi-3 { color: #2a1406; background: linear-gradient(90deg, #b06a2a, #f0b07a, #b06a2a); border-color: #ffd0a0; font-weight: 800; }
.badge-f.badge-dojo.dj-18 { color: #f0e0ff; background: linear-gradient(90deg, #3a0a6a, #7a2ac8, #3a0a6a); background-size: 200% 100%; border-color: #c890ff; animation: dj-shine 3s linear infinite; font-weight: 900; }
.dj-help { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.6; margin: 10px 0; }
.dj-gauntlet { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 10px; border-radius: 999px; border: 0; font: inherit;
  font-weight: 900; font-size: 16px; color: #fff; background: linear-gradient(#ff6a3a, #d4001a); cursor: pointer; }
.dj-gauntlet small { font-size: 11px; font-weight: 600; opacity: 0.9; }
#m-dojo { margin: 0 0 12px; text-align: center; }
#m-dojo[hidden] { display: none; }
#m-dojo p { margin: 4px 0; }
.dj-win { font-family: 'Dela Gothic One', sans-serif; font-size: 20px; color: var(--accent2); text-shadow: 0 0 12px rgba(255, 90, 31, 0.7); }
.dj-stars { font-size: 22px; color: var(--accent2); letter-spacing: 2px; }
.dj-stars b { font-size: 11px; letter-spacing: 0; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #d4001a; color: #fff; vertical-align: middle; }
.dj-tip { font-size: 11px; color: var(--muted); }
.dj-title { font-size: 14px; font-weight: 800; color: #ffd9a0; }
.dj-title small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.dj-lose { font-size: 15px; color: var(--muted); }
.dj-g { font-size: 14px; font-weight: 800; }
.dj-g b { font-size: 11px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #d4001a; color: #fff; }
.dj-card { margin-top: 6px; padding: 7px 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: #fff; cursor: pointer;
  background: #2a1830; border: 1px solid var(--accent2); }
.badge-f.badge-dojo { color: #ffb46a; background: rgba(255, 120, 30, 0.12); border-color: rgba(255, 140, 60, 0.55); }
.badge-f.badge-dojo.dj-10 { color: #1a0a00; border-color: #fff2b0; background: linear-gradient(90deg, #ffd23f, #fff6c8, #ff9a3a, #ffd23f); background-size: 200% 100%; animation: dj-shine 3s linear infinite; font-weight: 900; }
@keyframes dj-shine { to { background-position: -200% 0; } }
.dj-goal { text-align: center; font-size: 12px; margin: 10px 0 0; padding: 8px; border-radius: 10px; background: rgba(255, 210, 63, 0.08); border: 1px dashed rgba(255, 210, 63, 0.4); }
.dj-goal b { color: var(--accent2); }
.dj-goal.got { border-style: solid; box-shadow: 0 0 12px rgba(255, 210, 63, 0.5); }
.dj-master { color: var(--accent2); font-size: 15px; text-shadow: 0 0 10px rgba(255, 210, 63, 0.6); }
.badge-f.badge-dojo.dj-9 { color: #ff7a9a; background: rgba(255, 40, 90, 0.14); border-color: rgba(255, 70, 110, 0.6); }
#online-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 33; width: min(420px, calc(100% - 24px)); max-height: 85vh; overflow-y: auto;
  border-radius: 14px; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
#online-pop[hidden] { display: none; }
#online-body { padding: 4px 16px 16px; font-size: 14px; line-height: 1.6; }
#online-body p { margin: 8px 0; }
#online-body .on-note { color: var(--muted); font-size: 12px; }
#online-body .on-box { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
#online-body .on-box-title { margin: 0 0 4px; font-weight: 800; color: var(--accent2); }
#online-body .on-box .on-set b { color: var(--accent2); }
#online-body .on-tcode { margin: 6px 0; padding: 8px; border-radius: 10px; text-align: center; font: 800 20px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; color: #fff; background: rgba(0, 0, 0, 0.35); user-select: all; -webkit-user-select: all; }
#online-body .on-note a { color: var(--accent2); }
#online-body #on-tin { font-size: 15px; letter-spacing: 0.06em; font-family: ui-monospace, Menlo, Consolas, monospace; }
#online-body .on-list { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.7; color: #e6dcf2; }
#online-body .on-list b { color: var(--gold); }
#online-body .on-set { color: var(--muted); font-size: 13px; }
#online-body button { width: 100%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 11px; font-size: 15px; font-weight: 800; margin-top: 6px; }
#online-body button.accent { background: linear-gradient(180deg, #ff6a3d, #d4001a); border-color: transparent; }
#online-body .on-or { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 4px; }
#online-body .on-join { display: flex; gap: 8px; }
#online-body .on-join input { flex: 1; min-width: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.3em; text-align: center; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.3); color: var(--text); padding: 6px; }
#online-body .on-join button { width: auto; margin: 0; padding: 0 18px; }
#online-body .on-code { font-family: var(--font-en); font-size: 54px; letter-spacing: 0.15em; text-align: center; color: var(--accent2); margin: 6px 0; user-select: text; -webkit-user-select: text; }
#online-body .on-wait::after { content: ''; animation: on-dots 1.2s steps(4) infinite; }
@keyframes on-dots { 0% { content: ''; } 25% { content: '・'; } 50% { content: '・・'; } 75% { content: '・・・'; } }
#online-body .on-err { color: #ff6a6a; font-weight: 700; }
#online-body .on-me { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#online-body .on-me b { color: var(--accent2); }
#online-body .on-me b.nm { color: var(--text); } /* ふつうの名前は白。レアは金、伝説は虹 */
#online-body .on-gacha { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 4px; }
#online-body .on-gacha #on-rename { margin: 0; padding: 8px; font-size: 14px; }
#online-body .on-gacha small { color: var(--muted); font-size: 11px; text-align: center; }
#online-body .on-keep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
#online-body .on-keep button { width: auto; margin: 0; padding: 3px 10px; font-size: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 210, 63, 0.4); }
#online-body .on-me button { width: auto; margin: 0; padding: 3px 10px; font-size: 12px; border-radius: 999px; }
#online-body button:disabled { opacity: 0.4; }
#online-body .on-rank { list-style: none; margin: 6px 0; padding: 0; max-height: 45vh; overflow-y: auto; }
#online-body .on-rank li { display: grid; grid-template-columns: 2.2em 1fr 3.5em 3em; gap: 6px; padding: 6px 4px; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); align-items: center; }
#online-body .on-rank li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#online-body .on-rank .rk-name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.35; }
#online-body .on-rank .rk-name > b { max-width: 100%; }
#online-body .on-rank .rk-sub { display: flex; align-items: center; gap: 4px; }
#online-body .on-rank .rk-sub .badge-f { margin: 0; }
#online-body .on-rank .rk-sub .ptag { margin: 0; }
#online-body .on-founder { font-size: 12px; color: #e6dcf2; padding: 6px 10px; border-radius: 10px; background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.3); }
#online-body .on-founder b { color: var(--gold); }
#online-body .on-season small { color: var(--muted); font-size: 11px; }
/* 初代デストロイヤーの印（名前の横に控えめに。文字と細いふちだけ） */
.badge-f {
  flex: none; display: inline-block; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.45; letter-spacing: 0.02em; white-space: nowrap;
  padding: 0 6px; margin: 0 4px; border-radius: 4px; vertical-align: middle;
  color: #ffd23f; background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.45);
}
.badge-f.badge-season.st-3 { color: #ff5a6a; background: rgba(255, 40, 60, 0.12); border-color: rgba(255, 60, 80, 0.6); }
.badge-f.badge-season.st-10 { color: #d08aff; background: rgba(180, 75, 255, 0.12); border-color: rgba(190, 110, 255, 0.55); }
.badge-f.badge-season.st-50 { color: #7ac8ff; background: rgba(60, 150, 255, 0.12); border-color: rgba(90, 170, 255, 0.5); }
.badge-f.badge-dev { color: #7fc8ff; background: rgba(90, 170, 255, 0.1); border-color: rgba(90, 170, 255, 0.5); }
#online-body .on-rank li small { color: var(--muted); text-align: right; }
#online-body .on-rank li.on-mine { background: rgba(255, 210, 63, 0.12); }
#online-body .on-rank li[data-u], #online-body .on-rank li[data-i] { cursor: pointer; }
#online-body .on-rank li[data-u]:hover, #online-body .on-rank li[data-i]:hover { background: rgba(176, 102, 255, 0.15); }
#online-body .on-win { color: #5cff8a; font-weight: 800; } #online-body .on-lose { color: #ff7a7a; font-weight: 800; }
#kifu-list { list-style: none; margin: 0; padding: 6px 12px 12px; overflow-y: auto; }
#kifu-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); }
#kifu-list .kf-main { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
#kifu-list .kf-main small { color: var(--muted); font-size: 12px; }
#kifu-list button { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 13px; }
#kifu-list button.accent { background: linear-gradient(180deg, #ff6a3d, #d4001a); border-color: transparent; }
.previewing #preview-controls { display: flex; }

/* ---------- 演出レイヤー ---------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
/* 時間切れが近いとき：画面のふちを赤く光らせる（10 秒は 1 秒に 1 回、5 秒は 1 秒に 2 回） */
#time-alert { position: fixed; inset: 0; pointer-events: none; z-index: 19; opacity: 0; }
#time-alert.lv1 { box-shadow: inset 0 0 70px 18px rgba(255, 30, 30, 0.75); animation: time-alert 1s ease-in-out infinite; }
#time-alert.lv2 { box-shadow: inset 0 0 110px 34px rgba(255, 0, 0, 0.95); animation: time-alert 0.5s ease-in-out infinite; }
@keyframes time-alert { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
.time-alert-5 .player.active .time { animation: time-shake 0.25s linear infinite; color: #ff3030; }
@keyframes time-shake { 0%, 100% { transform: translate(0, 0) scale(1.15); } 25% { transform: translate(-3px, 1px) scale(1.15); } 75% { transform: translate(3px, -1px) scale(1.15); } }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 21; opacity: 0; background: var(--c0, #fff); }
#flash.on { animation: flash 0.45s ease-out; }
#flash.multi { animation: flash-multi 1.1s ease-out; }
#flash.strobe { animation: flash-strobe 1s steps(1); }
#flash.rainbow { animation: flash-rainbow 1.1s ease-out; }
#flash.god { animation: flash-god 2.6s ease-out; }
@keyframes flash { 0% { opacity: var(--alpha); } 100% { opacity: 0; } }
@keyframes flash-multi {
  0% { opacity: var(--alpha); background: var(--c0); }
  30% { opacity: 0.6; background: var(--c1); }
  60% { opacity: 0.35; background: var(--c2); }
  100% { opacity: 0; background: var(--c3); }
}
@keyframes flash-strobe {
  0% { opacity: 0.95; background: var(--c0); } 8% { opacity: 0; }
  16% { opacity: 0.85; background: var(--c1); } 24% { opacity: 0; }
  38% { opacity: 0.7; background: var(--c0); } 46% { opacity: 0; }
  62% { opacity: 0.4; background: var(--c2); } 70%, 100% { opacity: 0; }
}
@keyframes flash-rainbow {
  0% { opacity: var(--alpha); background: #fff; }
  20% { background: #ff0055; } 40% { background: #ffcc00; opacity: 0.6; }
  60% { background: #00e5ff; opacity: 0.4; } 80% { background: #b400ff; opacity: 0.2; }
  100% { opacity: 0; }
}
@keyframes flash-god {
  0% { opacity: 1; background: #fff; }
  8% { opacity: 1; background: #000; }
  14% { opacity: 1; background: var(--c0); }
  22% { opacity: 0.85; background: var(--c3); }
  30% { opacity: 0.7; background: var(--c1); }
  45% { opacity: 0.6; background: var(--c2); }
  60% { opacity: 0.4; background: var(--c0); }
  75% { opacity: 0.25; background: var(--c1); }
  100% { opacity: 0; }
}

/* テーマ別の画面全体の色かぶり（演出中だけ） */
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 19; opacity: 0; }
#vignette.show { animation: vig var(--dur) ease-out forwards; }
#vignette.soft { --vig-max: 0.55; }
@keyframes vig { 0% { opacity: 0; } 12% { opacity: var(--vig-max, 1); } 75% { opacity: var(--vig-max, 1); } 100% { opacity: 0; } }
/* デストロイの隕石：炎ではなく衝撃波の色（白・銀）。破壊神は真紅 */
#vignette.meteor { background: linear-gradient(180deg, rgba(25, 25, 40, 0.8), rgba(15, 10, 25, 0.25) 60%, rgba(220, 220, 240, 0.3)); }
#vignette.meteor-god { background: linear-gradient(180deg, rgba(40, 0, 8, 0.85), rgba(20, 5, 10, 0.35) 55%, rgba(255, 40, 60, 0.35)); }
#vignette.volcano { background: linear-gradient(180deg, rgba(45, 0, 0, 0.85), rgba(30, 5, 5, 0.5) 50%, rgba(255, 60, 0, 0.55)); }
#vignette.fire {
  background: radial-gradient(ellipse at 50% 110%, rgba(255, 90, 0, 0.6), rgba(120, 10, 0, 0.35) 55%, rgba(40, 0, 0, 0.6));
  box-shadow: inset 0 0 140px 50px rgba(255, 70, 0, 0.75);
}
#vignette.ice {
  background: radial-gradient(ellipse at center, rgba(200, 245, 255, 0) 40%, rgba(170, 230, 255, 0.45));
  box-shadow: inset 0 0 160px 70px rgba(225, 250, 255, 0.85);
}
#vignette.storm { background: rgba(6, 6, 30, 0.78); }
#vignette.storm.show { animation: vig var(--dur) ease-out forwards, storm-flicker 0.9s steps(1) infinite; }
@keyframes storm-flicker { 0%, 100% { background: rgba(6, 6, 30, 0.78); } 7% { background: rgba(200, 220, 255, 0.35); } 12% { background: rgba(6, 6, 30, 0.78); } 55% { background: rgba(150, 180, 255, 0.25); } 60% { background: rgba(6, 6, 30, 0.78); } }
/* 色違いの演出（シーズン報酬）：元の演出の暗幕の色を回す */
#vignette.v-crimson { filter: hue-rotate(115deg) saturate(1.8) brightness(0.55); }
#vignette.v-aoen { filter: hue-rotate(190deg); }
/* 虹滅：真ん中から虹色の光の筋が放射状に出る（色はゆっくり回る） */
#vignette[class*="v-kometsu"] { background:
  radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 35%),
  repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 50, 110, 0.5) 0 5deg, transparent 5deg 10deg, rgba(255, 170, 40, 0.5) 10deg 15deg, transparent 15deg 20deg,
    rgba(255, 235, 60, 0.5) 20deg 25deg, transparent 25deg 30deg, rgba(60, 255, 140, 0.5) 30deg 35deg, transparent 35deg 40deg,
    rgba(50, 200, 255, 0.5) 40deg 45deg, transparent 45deg 50deg, rgba(160, 90, 255, 0.5) 50deg 55deg, transparent 55deg 60deg); }
#vignette.show.v-kometsu { animation: vig var(--dur) ease-out forwards, km-hue 2.4s linear infinite; }
@keyframes km-hue { to { filter: hue-rotate(360deg); } }
#vignette.v-ougon, #vignette.meteor-god.v-ougon { filter: hue-rotate(45deg) saturate(1.3) brightness(1.15); }
#vignette.meteor-god.v-shimetsu { filter: hue-rotate(285deg); }
#vignette.holy { background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 240, 0.75), rgba(255, 230, 160, 0.35) 45%, rgba(255, 240, 200, 0.15)); }
#vignette.void { background: radial-gradient(circle at center, rgba(40, 0, 70, 0.1), rgba(25, 0, 50, 0.6) 45%, rgba(5, 0, 15, 0.9)); }

#banner {
  position: fixed; inset: 0; z-index: 22; pointer-events: none; display: none;
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
#banner.show { display: flex; animation: banner-out var(--dur) ease-in forwards; }
@keyframes banner-out { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.b-main {
  font-family: var(--font-en); font-size: clamp(36px, 10vw, 96px); line-height: 1; color: #fff;
  text-shadow: 0 0 10px var(--c), 0 0 30px var(--c), 0 0 60px var(--c), 0 5px 0 #000;
  animation: slam 0.45s cubic-bezier(.2, 1.6, .4, 1);
  white-space: nowrap;
}
.b-sub { font-family: var(--font-logo); font-size: clamp(20px, 5vw, 44px); color: #fff; margin-top: 6px;
  text-shadow: 0 0 12px var(--c, #ff3b2f), 0 3px 0 #000; animation: slam 0.5s 0.1s cubic-bezier(.2, 1.6, .4, 1) both; }
.b-count { font-family: var(--font-logo); font-size: clamp(16px, 4vw, 28px); color: var(--accent2); margin-top: 8px;
  letter-spacing: 0.15em; text-shadow: 0 0 8px #000, 0 2px 0 #000; animation: slam 0.5s 0.2s ease-out both; }
#banner.t0 .b-main { font-size: clamp(28px, 7vw, 56px); }
/* 光テーマは画面が明るくなるので、文字を濃い金色で縁取って読めるようにする */
#banner.th-light .b-main, #banner.th-light .b-sub {
  text-shadow: 0 0 2px #6a4000, 0 0 10px #b07000, 0 0 22px #c88a00, 0 4px 0 #3a2400;
}
#banner.th-light .b-count { text-shadow: 0 0 3px #3a2400, 0 0 8px #3a2400, 0 2px 0 #3a2400; }
#banner.t4 .b-main, #banner.t5 .b-main { font-size: clamp(26px, 8.4vw, 88px); }
#banner.t6 .b-main { font-family: var(--font-logo); font-size: clamp(56px, 17vw, 170px);
  animation: slam-god 0.9s cubic-bezier(.2, 1.6, .4, 1), god-glow 0.3s 0.9s infinite alternate; }
#banner.rainbow .b-main { animation-name: slam, hue; animation-duration: 0.45s, 0.6s; animation-iteration-count: 1, infinite; }
#banner.t6.rainbow .b-main { animation-name: slam-god, hue; animation-duration: 0.9s, 0.5s; animation-iteration-count: 1, infinite; }
/* 時間停止（消滅）：一瞬だけ画面を白黒に */
body.timestop #stage, body.timestop #fx { filter: grayscale(1) contrast(1.35); }
#banner.t6.th-clear .b-main { font-size: clamp(40px, 12vw, 120px); } /* ALL CLEAR は長いので、画面からはみ出さない大きさに */
/* 虹滅：技の名前は虹のグラデーションで塗り、白と濃い紫で縁取る（パチンコの「祝」のような見た目） */
#banner.th-kometsu .b-main, #banner.th-kometsu .b-sub {
  background: linear-gradient(180deg, #ff2a6a, #ff9a1f 20%, #ffe83a 38%, #3aff7a 55%, #2ad8ff 72%, #7a4aff 88%, #ff4ae0);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #fff; text-shadow: none;
  filter: drop-shadow(0 0 1px #2a0040) drop-shadow(0 0 2px #2a0040) drop-shadow(0 5px 0 #2a0040) drop-shadow(0 0 16px rgba(255, 255, 255, 0.85));
}
#banner.t6.th-kometsu .b-main { -webkit-text-stroke: 3px #fff; animation: slam-god 0.9s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slam { 0% { transform: scale(4) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes slam-god { 0% { transform: scale(8) rotate(20deg); opacity: 0; filter: blur(10px); } 100% { transform: scale(1); opacity: 1; filter: none; } }
@keyframes hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes god-glow { to { text-shadow: 0 0 20px #fff, 0 0 60px #ff0, 0 0 120px #f00; } }

/* ---------- モーダル ---------- */
#modal {
  position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7); padding: 16px;
}
#modal.show { display: flex; }
#a2hs {
  position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7); padding: 16px;
}
#a2hs[hidden] { display: none; }
#tut-ask { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
#tut-ask[hidden] { display: none; }
#tut-pick { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
#tut-pick[hidden] { display: none; }
#tut-pick .modal-box { text-align: center; max-width: 380px; }
.tut-pick-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.tut-pick-list button { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 12px; font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; }
.tut-pick-list button.accent { background: linear-gradient(#ff6a3d, #d4001a); border-color: transparent; color: #fff; }
.tut-pick-list b { font-size: 16px; }
.tut-pick-list small { font-size: 12px; opacity: 0.85; }
#tut-ask .modal-box { text-align: center; max-width: 380px; }
.tut-ask-lead { font-size: 14px; line-height: 1.7; margin: 10px 0 14px; }
.tut-ask-lead small { color: var(--muted); font-size: 12px; }
.a2hs-title { font-size: 20px; font-weight: 800; color: var(--accent2); }
.a2hs-steps { text-align: left; line-height: 1.8; padding-left: 22px; margin: 14px 0 8px; }
.a2hs-lead { font-size: 14px; line-height: 1.7; margin: 10px 0 14px; text-align: left; }
.a2hs-lead b { color: var(--accent2); }
.a2hs-step { margin: 14px 0 4px; padding: 12px; border-radius: 12px; background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.35); text-align: left; }
.a2hs-step-title { margin: 14px 0 0; font-size: 15px; font-weight: 800; color: var(--accent2); text-align: left; }
.a2hs-step .a2hs-step-title { margin: 0; }
.a2hs-step-text { margin: 4px 0 10px; font-size: 13px; line-height: 1.6; }
.a2hs-step #a2hs-link { width: 100%; border: 0; border-radius: 999px; padding: 11px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff6a3d, #d4001a); }
#a2hs .a2hs-step-title + .a2hs-steps { margin-top: 6px; }
.a2hs-note { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.modal-box {
  position: relative;
  width: 100%; max-width: 380px; background: var(--panel); border-radius: 18px; padding: 24px;
  text-align: center; border: 2px solid var(--accent); box-shadow: 0 0 40px rgba(255, 59, 47, 0.5);
}
#btn-mclose {
  position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: none; color: #fff; font-size: 26px; line-height: 1; opacity: 0.75;
}

.m-title { font-family: var(--font-logo); font-size: 34px; color: var(--accent2); text-shadow: 0 0 14px #ff3b2f; }
.m-body { margin: 14px 0 20px; line-height: 1.8; white-space: pre-line; }
.m-buttons { display: flex; gap: 8px; }
.m-buttons button {
  flex: 1; border: 1px solid rgba(255, 255, 255, 0.15); background: var(--panel-active);
  border-radius: 10px; padding: 12px; font-weight: 700;
}

/* ---------- 演出の選択 ---------- */
.themes { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 520px; }
.theme-row, .rule-row { display: flex; flex-direction: column; gap: 6px; }
.tr-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.tr-label .p-stone { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 5px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); font-size: 13px; font-weight: 700;
}
.chip .mk, .p-theme {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-weight: 900; font-size: 13px; line-height: 1; color: #120a10; background: var(--tc);
}
.chip[aria-pressed="true"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 60%, transparent); }
.chip.taken { opacity: 0.6; } /* 押すと相手と入れ替え */
.chip:disabled { opacity: 0.35; cursor: not-allowed; }
.chip.taken::after { content: '使用中'; font-size: 10px; font-weight: 700; margin-left: 2px; color: var(--muted); }
.chip:focus-visible, .p-theme:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.p-name { display: flex; align-items: center; gap: 8px; }
.rule-chip { padding: 6px 14px; }
.rule-chip[aria-pressed="true"] { --tc: var(--accent2); }
#score-live { color: var(--text); font-weight: 800; }
.p-theme { border: 0; width: 22px; height: 22px; font-size: 12px; padding: 0; }

/* ---------- タイトル：魔法っぽく。枠は使わず、見出しと光る線で分ける ---------- */
:root { --gold: #ffd23f; --magic: #b066ff; --frost: #5ad8ff; }
#title { position: relative; isolation: isolate; }
#title::before { /* 舞う光の粒 */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff6c8, transparent), radial-gradient(1px 1px at 78% 12%, #e0c8ff, transparent),
    radial-gradient(1.5px 1.5px at 30% 72%, #bff3ff, transparent), radial-gradient(1px 1px at 64% 48%, #fff, transparent),
    radial-gradient(2px 2px at 88% 66%, #ffd23f, transparent), radial-gradient(1px 1px at 46% 88%, #e0c8ff, transparent),
    radial-gradient(1.5px 1.5px at 8% 54%, #fff, transparent), radial-gradient(1px 1px at 56% 26%, #bff3ff, transparent);
  background-size: 320px 420px; animation: sparkle-drift 24s linear infinite;
}
@keyframes sparkle-drift { from { background-position: 0 0; } to { background-position: 0 -420px; } }
.title-wrap { position: relative; }
.title-wrap::before { /* ロゴのうしろの魔法陣 */
  content: ''; position: absolute; left: 50%; top: 50%; width: min(70vw, 360px); aspect-ratio: 1; z-index: -1;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.35;
  background:
    radial-gradient(circle, transparent 58%, rgba(176, 102, 255, 0.5) 59%, transparent 60%, transparent 66%, rgba(255, 210, 63, 0.45) 67%, transparent 68%),
    repeating-conic-gradient(from 0deg, rgba(255, 210, 63, 0.35) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%, #000 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 55%, #000 56%, #000 70%, transparent 71%);
  animation: rune-spin 40s linear infinite;
}
@keyframes rune-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fs-big {
  margin-top: -6px; border-radius: 999px; padding: 11px 30px; font-size: 16px; font-weight: 800; letter-spacing: 0.08em; color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(rgba(20, 10, 30, 0.85), rgba(20, 10, 30, 0.85)) padding-box, linear-gradient(120deg, var(--gold), var(--magic), var(--frost)) border-box;
  box-shadow: 0 0 18px rgba(176, 102, 255, 0.35);
}
.home-sec { width: min(420px, 100%); display: flex; flex-direction: column; gap: 8px; }
.sec-title { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.25em; color: var(--gold); text-shadow: 0 0 10px rgba(255, 210, 63, 0.5); }
.sec-title::before, .sec-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 210, 63, 0.6), transparent); }
.sec-title span::before, .sec-title span::after { content: '✦'; margin: 0 8px; font-size: 10px; color: var(--magic); }
.home-me { margin: -4px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.home-me:empty { display: none; }
.on-rule-note { margin: 0; text-align: center; font-size: 12px; line-height: 1.6; color: #c9b8e8; }
.on-rule-note b { color: var(--gold); font-weight: 700; }
.on-rule-note button { background: rgba(255, 210, 63, 0.12); color: var(--gold); border: 1px solid rgba(255, 210, 63, 0.55); font-weight: 700; box-shadow: none; }
.on-rule-note button, #online-body .on-rule button { width: auto; margin: 0 0 0 6px; padding: 2px 10px; font-size: 12px; border-radius: 999px; vertical-align: baseline; }
#online-body .on-rule { font-size: 12px; color: var(--muted); }
#online-body .on-rule b { color: var(--gold); }
.start-item {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%;
  border: 0; border-radius: 999px; padding: 13px 20px; color: #fff;
  background: linear-gradient(180deg, #ff6a3d, #d4001a); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(255, 40, 20, 0.55);
}
.start-item b { font-size: 22px; font-weight: 900; letter-spacing: 0.12em; }
.start-item small { font-size: 12px; color: #ffe3d8; letter-spacing: 0.02em; }
.start-item:active { transform: scale(0.98); }
.quick { display: flex; gap: 8px; }
/* タイトルの「対局の設定」（ひらく・たたむ） */
.home-set { border: 1px solid rgba(255, 210, 63, 0.35); border-radius: 14px; background: rgba(255, 210, 63, 0.06); text-align: left; }
.hs-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.hs-t { color: var(--accent2); font-weight: 800; font-size: 14px; white-space: nowrap; }
.hs-s { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-ar { color: var(--accent2); font-size: 12px; font-weight: 700; white-space: nowrap; margin-left: auto; }
.hs-body { display: none; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.home-set.open .hs-body { display: flex; }
.hs-row { display: flex; flex-direction: column; gap: 5px; }
.hs-row[hidden] { display: none; }
.home-set .tr-label { font-size: 12px; }
.home-set .chip { padding: 4px 9px; font-size: 12px; }
.home-set .chip .mk { width: 18px; height: 18px; font-size: 11px; }
.hs-more { align-self: flex-end; background: none; border: 0; color: var(--accent2); font-size: 12px; padding: 2px 0; cursor: pointer; }
.quick button, .on-item {
  border: 1px solid transparent; color: #fff; font-weight: 800;
  background: linear-gradient(rgba(22, 12, 34, 0.88), rgba(22, 12, 34, 0.88)) padding-box,
    linear-gradient(120deg, rgba(255, 210, 63, 0.55), rgba(176, 102, 255, 0.55), rgba(90, 216, 255, 0.45)) border-box;
}
.quick button { flex: 1; border-radius: 999px; padding: 9px 4px; font-size: 14px; letter-spacing: 0.05em; }
.quick button[aria-pressed="true"] {
  background: linear-gradient(rgba(60, 30, 90, 0.9), rgba(60, 30, 90, 0.9)) padding-box, linear-gradient(120deg, var(--gold), var(--magic), var(--frost)) border-box;
  box-shadow: 0 0 14px rgba(176, 102, 255, 0.5);
}
.on-item { display: flex; align-items: baseline; gap: 8px; width: 100%; border-radius: 14px; padding: 12px 16px; text-align: left; font-size: 15px; letter-spacing: 0.04em; }
.on-item span { margin-left: auto; font-size: 11px; color: #c9b8e8; font-weight: 600; letter-spacing: 0; }
.on-item::after { content: '›'; color: var(--gold); margin-left: 8px; }
.on-item.ghost { background: linear-gradient(rgba(22, 12, 34, 0.5), rgba(22, 12, 34, 0.5)) padding-box, linear-gradient(120deg, rgba(255, 210, 63, 0.3), rgba(176, 102, 255, 0.3)) border-box; }
.on-item.locked { opacity: 0.5; }
.on-item.soon { opacity: 0.6; border-style: dashed; }
.on-item.soon::after { content: 'SOON'; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); }
.on-item:active, .quick button:active { transform: scale(0.98); }
.beginner { width: min(420px, 100%); }

/* ---------- ⚙ 設定（タイトルの上に重ねる） ---------- */
#settings-pop {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 60, 30, 0.25), transparent 60%), var(--bg);
}
#settings-pop[hidden] { display: none; }
.sp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 4px; }
.sp-head b { font-size: 18px; color: var(--accent2); }
.sp-head button { border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; border-radius: 999px; padding: 5px 14px; font-weight: 700; }
.sp-tabs { display: flex; gap: 4px; margin: 6px 16px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.sp-tabs button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px 0; font-weight: 800; font-size: 14px; color: var(--muted); }
.sp-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #ff6a3d, #d4001a); color: #fff; }
.sp-body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; align-items: center; }
.sp-panel { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
.sp-panel[hidden] { display: none; }
.sp-panel .rules { max-width: none; }
.sp-ok { margin: 8px 16px max(14px, env(safe-area-inset-bottom)); border: 0; border-radius: 999px; padding: 13px; font-weight: 900; font-size: 16px; color: #fff; background: linear-gradient(180deg, #ff6a3d, #d4001a); }


.title-foot { flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.title-foot > * { white-space: nowrap; }
.sp-panel .preview { justify-content: flex-start; }
.sp-panel .preview > span { flex-basis: 100%; }
/* はじめての人向けの案内と、下の小さいボタンも同じ光るふちに */
#title .beginner { background: transparent; border: 0; padding: 0; }
#title .sub-btn {
  border: 1px solid transparent; color: #fff;
  background: linear-gradient(rgba(22, 12, 34, 0.85), rgba(22, 12, 34, 0.85)) padding-box,
    linear-gradient(120deg, rgba(255, 210, 63, 0.5), rgba(176, 102, 255, 0.5), rgba(90, 216, 255, 0.4)) border-box;
}

/* ---------- 記録が消えないようにする案内（タイトルのいちばん上） ---------- */
#save-note {
  width: min(420px, 100%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: -10px;
  padding: 8px 10px 8px 12px; border-radius: 12px; font-size: 12px; line-height: 1.6; color: #e6dcf2;
  background: rgba(176, 102, 255, 0.12); border: 1px solid rgba(176, 102, 255, 0.4);
}
#save-note > span { flex: 1 1 200px; }
#save-note b { color: var(--gold); }
#save-note button { border: 1px solid rgba(255, 210, 63, 0.55); background: rgba(255, 210, 63, 0.12); color: var(--gold); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
#save-note #save-note-close { border: 0; background: transparent; color: var(--muted); font-size: 16px; padding: 0 4px; margin-left: auto; }
#save-note.warn { background: rgba(255, 59, 47, 0.16); border-color: rgba(255, 90, 60, 0.7); color: #fff; }
#save-note.warn b { color: #ffcc33; }

/* プレイヤータグ（名前の横の #K7P2） */
.ptag { flex: none; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; margin-left: 2px; font-family: ui-monospace, Menlo, Consolas, monospace; }
/* 名前ガチャ：レア＝金色、伝説＝虹色 */
.nm-rare { color: #ffd23f !important; text-shadow: 0 0 8px rgba(255, 210, 63, 0.7); }
.nm-legend {
  background: linear-gradient(90deg, #ff5a5a, #ffd23f, #5affa0, #5ad8ff, #c77dff, #ff5a5a); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
  animation: nm-rainbow 3s linear infinite; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}
@keyframes nm-rainbow { to { background-position: -200% 0; } }
#online-body #on-cpu small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
#online-body #on-adv-cpu small { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.8); font-weight: 600; margin-top: 2px; }
#online-body .on-lv { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin: 6px 0; font-size: 12px; color: var(--muted); }
#online-body .on-lv span { margin-right: 4px; }
#online-body .on-lv button { width: 27px; height: 28px; margin: 0; padding: 0; border-radius: 8px; font-size: 13px; font-weight: 800; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text); }
#online-body .on-lv button[aria-pressed="true"] { background: linear-gradient(180deg, #ff6a3d, #d4001a); border-color: transparent; color: #fff; }

/* デストロイルールの初めての出来事の一言（1 回だけ） */
#dhint { position: fixed; left: 50%; top: 18%; transform: translate(-50%, -8px); z-index: 30; max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 12px;
  background: rgba(20, 10, 24, 0.92); border: 1px solid var(--accent2); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
#dhint.show { opacity: 1; transform: translate(-50%, 0); }

/* メンテナンスのお知らせ */
#maint-note {
  width: min(420px, 100%); padding: 10px 14px; border-radius: 12px; text-align: center; line-height: 1.6;
  background: rgba(255, 190, 40, 0.14); border: 1px solid rgba(255, 190, 40, 0.6); color: #ffe7a8; font-size: 14px;
}
#maint-note b { color: #ffd23f; font-size: 15px; }
#maint-note[hidden] { display: none; }

/* ホームのランダムマッチ・ランクマッチに出す、今いる人の数 */
.on-item .on-live { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0; color: #7dffb0; background: rgba(60, 220, 130, 0.14); border: 1px solid rgba(60, 220, 130, 0.45); border-radius: 999px; padding: 1px 8px; align-self: center; white-space: nowrap; }
.on-item .on-live[hidden] { display: none; }
.on-item .on-live.hot { color: #fff; background: linear-gradient(180deg, #ff6a3d, #d4001a); border-color: transparent; animation: live-hot 1.2s ease-in-out infinite; }
#title .on-item.hot-btn > span { display: none; }
#title .on-item.hot-btn::after { margin-left: auto; }
#title .on-item.hot-btn { border-color: rgba(255, 106, 61, 0.7); }
@keyframes live-hot { 50% { box-shadow: 0 0 10px rgba(255, 106, 61, 0.8); } }
/* CPU 戦の間の「相手を探しています」・対局中の観戦の人数 */
.float-pill { position: fixed; left: 50%; transform: translateX(-50%); top: max(8px, env(safe-area-inset-top)); z-index: 30; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #ffe7a8; background: rgba(20, 10, 30, 0.85); border: 1px solid rgba(255, 210, 63, 0.5); pointer-events: none; white-space: nowrap; }
.float-pill[hidden] { display: none; }
#watch-pill { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: auto; right: 10px; transform: none; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
#bg-found { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; width: min(340px, calc(100% - 32px)); padding: 16px; border-radius: 14px; text-align: center; background: var(--panel); border: 1px solid rgba(255, 210, 63, 0.6); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); }
#bg-found[hidden] { display: none; }
#bg-found p { margin: 6px 0; line-height: 1.6; }
#bg-found .bg-found-t { font-size: 17px; font-weight: 800; color: var(--gold); }
#bg-found small { color: var(--muted); }
#bg-found button { width: 100%; margin-top: 8px; padding: 11px; border-radius: 10px; font-size: 15px; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }
#bg-found button.accent { background: linear-gradient(180deg, #ff6a3d, #d4001a); border-color: transparent; }
/* 観戦の一覧 */
#online-body .on-live-item { display: flex; align-items: baseline; gap: 8px; text-align: left; }
#online-body .on-live-item span { font-size: 12px; color: var(--muted); font-weight: 600; }
#online-body .on-live-item small { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
/* 観戦中は、ハイライト・速さ・共有のボタンを出さない */
.watching #rp-auto, .watching #rp-speed, .watching #rp-rec, .watching #rp-dmg { display: none; }

/* ---------- ホーム：上の 1 行・タブで切り替える中身・下のタブ ---------- */
#title { gap: 12px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
#title > :last-child { margin-bottom: 0; }
.fs-row { display: flex; align-items: center; gap: 10px; }
.fs-row .fs-big { margin-top: 0; }
.home-gear { width: 44px; height: 44px; padding: 0; border-radius: 999px; font-size: 19px; color: #fff; background: rgba(20, 10, 30, 0.85); border: 1px solid rgba(176, 102, 255, 0.6); box-shadow: 0 0 14px rgba(176, 102, 255, 0.3); }
.home-gear:active { transform: scale(0.94); }
#title .title-wrap { margin-top: 8px; }
#save-note, #maint-note { width: min(420px, 100%); }
.tab-pane { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; }
.tab-pane[hidden] { display: none; }
/* CPU と対戦（対局開始）と「変える」 */
.cpu-bar { display: flex; gap: 8px; }
.cpu-bar .start-item { flex: 1; min-width: 0; align-items: flex-start; border-radius: 16px; padding: 12px 16px; }
.cpu-bar .start-item b { font-size: 20px; letter-spacing: 0.06em; }
.cpu-bar .start-item small { text-align: left; }
.cpu-chg { flex: none; border-radius: 16px; padding: 0 14px; font-size: 13px; font-weight: 800; color: #fff; border: 1px solid rgba(255, 210, 63, 0.5); background: rgba(255, 210, 63, 0.1); }
.home-set:not(.open) { display: none; }
.home-set .hs-body { padding-top: 12px; }
.home-set .quick button { padding: 6px 4px; font-size: 13px; }
/* ホームのオンライン：見出しと 4 つのマス */
.home-h { display: flex; align-items: center; gap: 8px; margin: 6px 2px 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--gold); }
.home-h .on-live { margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: 0; padding: 2px 9px; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #ff6a3d, #d4001a); animation: live-hot 1.2s ease-in-out infinite; }
.home-h .on-live[hidden] { display: none; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; text-align: left; color: #fff; border: 1px solid transparent;
  background: linear-gradient(rgba(22, 12, 34, 0.88), rgba(22, 12, 34, 0.88)) padding-box, linear-gradient(120deg, rgba(255, 210, 63, 0.45), rgba(176, 102, 255, 0.45)) border-box; }
.home-tile b { font-size: 14px; font-weight: 800; }
.home-tile small { font-size: 10.5px; color: #c9b8e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.home-tile.locked { opacity: 0.5; }
.home-tile:active { transform: scale(0.97); }
#title .tab-pane .beginner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; text-align: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 210, 63, 0.4); background: rgba(255, 210, 63, 0.07); }
#title .tab-pane .beginner .title-links { flex-wrap: nowrap; }
#title .tab-pane .beginner .sub-btn { padding: 6px 12px; font-size: 13px; }
/* オンライン・記録のタブ */
.pane-h { margin: 4px 2px 2px; font-size: 20px; font-weight: 900; }
.pane-note { margin: 0; text-align: center; font-size: 12px; color: var(--gold); }
.pane-soon { margin: 6px 0 0; text-align: center; font-size: 11px; color: var(--muted); }
.pane-soon b { color: var(--gold); letter-spacing: 0.08em; }
.pane-soon .on-item { display: inline; width: auto; padding: 2px 6px; font-size: 11px; font-weight: 600; color: var(--muted); border: 0; background: none; letter-spacing: 0; }
.pane-soon .on-item::after { content: none; }
#title .tab-pane .on-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 下のタブ */
.home-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center; padding: 6px 4px max(8px, env(safe-area-inset-bottom));
  background: rgba(12, 6, 20, 0.94); border-top: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home-tabs button { flex: 1; max-width: 100px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none; color: #a99bc4; font-size: 11px; font-weight: 700; }
.home-tabs button span { font-size: 20px; line-height: 1.1; filter: grayscale(0.6); }
.home-tabs button[aria-selected="true"] { color: var(--gold); }
.home-tabs button[aria-selected="true"] span { filter: none; }
.tab-dot { position: absolute; top: 2px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #ff3d1f; box-shadow: 0 0 8px #ff3d1f; }
.tab-dot[hidden] { display: none; }
body:has(#title.active) #gtoast { bottom: calc(84px + env(safe-area-inset-bottom)); }
#save-note:not(.warn) { padding: 6px 10px; font-size: 11px; gap: 6px; flex-wrap: nowrap; }
#save-note:not(.warn) > span { flex: 1 1 auto; min-width: 0; }
#save-note:not(.warn) button { padding: 2px 10px; font-size: 11.5px; white-space: nowrap; }
/* ホームのカードの右上の小さい札（迷宮の「CPU戦」・「この端末で遊ぶ」の「ルール変更」） */
.card-tag { position: absolute; top: 8px; right: 8px; z-index: 2; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; color: var(--gold); background: rgba(20, 10, 30, 0.75); border: 1px solid rgba(255, 210, 63, 0.55); line-height: 1.4; }
.dungeon-btn .card-tag { top: 6px; right: 6px; color: #ffd9a0; border-color: rgba(255, 170, 60, 0.6); }
/* この端末で遊ぶ：オンラインのマスと同じ光るふちのカード */
.local-card { position: relative; }
.local-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 16px; border-radius: 14px; text-align: left; color: #fff; border: 1px solid transparent;
  background: linear-gradient(rgba(40, 20, 60, 0.9), rgba(28, 14, 44, 0.9)) padding-box, linear-gradient(120deg, var(--gold), var(--magic), var(--frost)) border-box; box-shadow: 0 0 16px rgba(176, 102, 255, 0.25); }
.local-btn b { font-size: 19px; font-weight: 900; letter-spacing: 0.06em; }
.local-btn small { font-size: 12px; color: #c9b8e8; }
.local-go { align-self: flex-end; margin-top: -18px; font-size: 13px; font-weight: 800; color: var(--gold); }
.local-btn:active { transform: scale(0.98); }
.local-chg { cursor: pointer; }
.local-chg:active { transform: scale(0.95); }
/* 一画面に収める：⚙ 設定は右上、ランクマッチは横いっぱい、破壊の迷宮はいちばん下に小さく */
.home-gear { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3; }
#title #save-note:not([hidden]) { align-self: flex-start; width: auto; max-width: calc(100% - 52px); }
#title .fs-big { margin-top: -4px; padding: 8px 26px; font-size: 15px; }
.home-tile.wide { grid-column: 1 / -1; position: relative; padding: 12px 14px; }
.home-tile.wide b { font-size: 16px; }
.home-tile.wide .on-live { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #ff6a3d, #d4001a); animation: live-hot 1.2s ease-in-out infinite; }
.home-tile.wide .on-live[hidden] { display: none; }
.home-tile.wide:has(.on-live:not([hidden])) { border-color: rgba(255, 106, 61, 0.7); }
.dungeon-btn.dg-small { min-height: 0; padding: 12px 56px; }
.dg-small .dg-text { gap: 2px; }
.dg-small .dg-text b { font-size: 22px; }
.dg-small .dg-text small { font-size: 11px; }
.dg-small .dg-torch { height: 30px; margin-top: -4px; }
.dg-small .dg-torch.l { left: 18px; } .dg-small .dg-torch.r { right: 18px; }
.dg-small .dg-fire { width: 16px; height: 24px; margin-left: -8px; }
.dg-small .card-tag { top: 50%; right: 44px; transform: translateY(-50%); }
#title .tab-pane .beginner { padding: 8px 10px; gap: 6px; }
#title .tab-pane .beginner > span { font-size: 12px; }
/* 背の低いスマホ（iPhone SE など）は、ロゴを少し小さく */
@media (max-height: 720px) {
  #title .logo { font-size: clamp(40px, 11vw, 120px); }
  #title .sublogo { font-size: 16px; margin-top: 2px; }
  #title { gap: 9px; }
}
#title .tab-pane .on-item { white-space: nowrap; }
#title .tab-pane .on-item span { min-width: 0; }
/* 残りのため撃ち（1 局 3 回の必殺技） */
.hp-charge { display: inline-flex; gap: 1px; margin-left: 6px; }
.hp-charge[hidden] { display: none; }
.hp-charge i { font-style: normal; font-size: 13px; line-height: 1; opacity: 0.2; filter: grayscale(1); transition: opacity 0.2s, filter 0.2s; }
.hp-charge i::before { content: '⚡'; }
.hp-charge i.on { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.9)); }
.p-hp .hp-charge, .p-hp .hp-carry { flex: none; }
/* アップデートのお知らせ */
#news-pop { position: fixed; inset: 0; z-index: 41; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
#news-pop[hidden] { display: none; }
#news-pop .modal-box { max-width: 380px; }
.news-list { margin: 12px 0; padding-left: 20px; text-align: left; font-size: 13.5px; line-height: 1.7; }
.news-list li { margin-bottom: 4px; }
.news-list b { color: var(--gold); }
/* ホームのランクマッチ：右上に「観戦」の札 */
.rank-card { position: relative; grid-column: 1 / -1; }
.rank-card .home-tile.wide { width: 100%; }
.watch-tag { cursor: pointer; }
.watch-tag:active { transform: scale(0.95); }
.home-tile.wide b .on-live { position: static; transform: none; display: inline-block; margin-left: 6px; vertical-align: middle; }
.home-tile.wide b .on-live[hidden] { display: none; }
.rank-card:has(.on-live:not([hidden])) .home-tile { border-color: rgba(255, 106, 61, 0.7); }
/* ランクマッチをいちばん大きく（いちばん遊んでほしい）。この端末で遊ぶは、ほかのマスと同じ大きさに */
.rank-card .home-tile.wide { padding: 20px 16px; border-radius: 16px; gap: 4px;
  background: linear-gradient(rgba(70, 20, 30, 0.92), rgba(40, 12, 36, 0.92)) padding-box, linear-gradient(120deg, var(--gold), #ff6a3d, var(--magic)) border-box;
  box-shadow: 0 0 22px rgba(255, 106, 61, 0.35); }
.rank-card .home-tile.wide b { font-size: 24px; font-weight: 900; letter-spacing: 0.04em; }
.rank-card .home-tile.wide small { font-size: 12.5px; color: #f0d9c8; }
.rank-card .home-tile.wide::after { content: '対戦する ▶'; position: absolute; right: 14px; bottom: 12px; font-size: 13px; font-weight: 800; color: var(--gold); }
.local-btn { padding: 10px 12px; border-radius: 12px; box-shadow: none;
  background: linear-gradient(rgba(22, 12, 34, 0.88), rgba(22, 12, 34, 0.88)) padding-box, linear-gradient(120deg, rgba(255, 210, 63, 0.45), rgba(176, 102, 255, 0.45)) border-box; }
.local-btn b { font-size: 14px; font-weight: 800; letter-spacing: 0; }
.local-btn small { font-size: 10.5px; }
.local-go { display: none; }
.local-card .card-tag { top: 50%; transform: translateY(-50%); }
.local-chg:active { transform: translateY(-50%) scale(0.95); }
#title .tab-pane .beginner { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; text-align: left; }
/* チュートリアルのマス（大きい字がチュートリアル） */
#title .tab-pane .beginner { display: block; padding: 0; border: 0; background: none; }
.tut-tile { width: 100%; border-color: transparent; background: linear-gradient(rgba(40, 30, 12, 0.88), rgba(30, 20, 10, 0.88)) padding-box, linear-gradient(120deg, rgba(255, 210, 63, 0.6), rgba(255, 170, 60, 0.4)) border-box; }
.tut-tile::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--gold); }
.tut-tile { position: relative; }

/* ---------- ダンジョン風（シンプル）：石の壁・たいまつの明かり・鉄の札。紫の光・魔法陣・光の粒はやめる ---------- */
:root { --gold: #e8b65a; --magic: #8a6a4a; --frost: #8a7a66; --stone: #1d1916; --stone2: #27211c; --edge: #4a3d31; --ember: #ff7a2e; --parch: #f1e2c4; }
#title {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 130, 40, 0.28), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.8), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 92px),
    #15110f;
}
#title::before, .title-wrap::before { display: none; }
.home-tile, .local-btn, .tut-tile, #title .on-item, #title .sub-btn {
  background: linear-gradient(180deg, var(--stone2), var(--stone)) !important; border: 1px solid var(--edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.5) !important; color: var(--parch);
}
.home-tile small, .local-btn small, #title .on-item span { color: #b9a88f !important; }
.rank-card .home-tile.wide {
  background: linear-gradient(180deg, #3a2418, #221510) !important; border: 1px solid #a8642c !important;
  box-shadow: inset 0 0 18px rgba(255, 122, 46, 0.18), 0 0 18px rgba(255, 122, 46, 0.25) !important;
}
.rank-card .home-tile.wide b { color: #ffe3b0; }
.rank-card .home-tile.wide::after, .local-go { color: var(--ember) !important; }
.card-tag { background: #141110; border: 1px solid #6b5644; color: #e8c79a; }
.tut-tile b { color: #ffd98a; }
.tut-tile::after { color: var(--gold); }
.fs-big { background: var(--stone2) !important; border: 1px solid var(--edge) !important; box-shadow: none !important; }
.home-gear { background: var(--stone2); border: 1px solid var(--edge); box-shadow: none; }
#save-note { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--edge) !important; }
.home-tabs { background: #100d0b; border-top: 1px solid var(--edge); }
.home-tabs button[aria-selected="true"] { color: var(--ember); }
.logo { filter: drop-shadow(0 0 10px rgba(255, 110, 30, 0.55)) drop-shadow(0 4px 0 #2a0a00); }
.logo::before, .logo::after { display: none; }
.sublogo { text-shadow: 0 0 6px rgba(255, 110, 30, 0.7); }
.pane-h { color: var(--parch); }
/* ほかの画面も同じ石の色に（もとの紫の夜空・パネルの色を置きかえる） */
:root { --bg: #120e0c; --panel: #1f1a16; --panel-active: #2e241d; --text: #f3e9d8; --muted: #a8988a; }
/* もう少し明るく、灰色の石に（茶色をおさえる） */
:root { --stone: #33322f; --stone2: #403e3a; --edge: #625d56; --parch: #eeeae3;
  --bg: #232325; --panel: #2e2d2c; --panel-active: #3b3937; --text: #f1eee9; --muted: #aba69e; }
#title {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 150, 60, 0.22), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 92px),
    #2a2a2c;
}
.home-tile small, .local-btn small, #title .on-item span { color: #b8b3aa !important; }
.card-tag { background: #232325; border-color: #77706a; color: #e9d6b4; }
.home-tabs { background: #1d1d1f; }
.rank-card .home-tile.wide { background: linear-gradient(180deg, #4a3326, #2f2420) !important; }

/* 石の壁：大きさがそろった石を、段ごとにずらして積んだ見た目（石ごとに少しずつ色がちがう） */
:root { --wall: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='360'%20viewBox='0%200%20360%20360'%3E%3Crect%20width='360'%20height='360'%20fill='%231c1c1e'/%3E%3Cg%20stroke='%23000'%20stroke-opacity='.45'%20stroke-width='1.2'%20stroke-linejoin='round'%3E%3Cpolygon%20points='-57.5,0.6%20-27.7,3.4%20-3.6,1.5%200.7,17.8%20-3.4,41.4%20-24.2,45.6%20-56.0,43.6%20-56.8,22.3'%20fill='%233c3f3d'/%3E%3Cpolygon%20points='302.5,0.6%20332.3,3.4%20356.4,1.5%20360.7,17.8%20356.6,41.4%20335.8,45.6%20304.0,43.6%20303.2,22.3'%20fill='%233c3f3d'/%3E%3Cpolygon%20points='9.1,0.3%2051.7,0.7%2094.5,2.4%2097.7,17.9%2087.6,43.5%2055.2,46.5%207.7,41.8%206.0,21.4'%20fill='%23414240'/%3E%3Cpolygon%20points='104.6,-0.5%20115.5,3.8%20139.5,3.6%20145.4,20.2%20140.6,44.7%20120.1,42.8%20106.5,41.8%20100.9,20.2'%20fill='%23393634'/%3E%3Cpolygon%20points='152.2,6.3%20170.1,2.0%20191.3,2.2%20195.2,25.9%20191.1,42.4%20170.7,45.7%20156.9,44.5%20149.0,22.6'%20fill='%233d3a38'/%3E%3Cpolygon%20points='202.1,5.6%20250.4,-0.5%20304.3,0.2%20309.3,24.9%20306.9,41.5%20245.9,46.9%20209.6,44.2%20204.9,24.4'%20fill='%23343634'/%3E%3Cpolygon%20points='317.9,2.2%20338.4,-0.5%20365.9,2.5%20361.9,21.7%20362.8,39.8%20339.2,44.3%20321.6,43.9%20311.6,18.2'%20fill='%23454543'/%3E%3Cpolygon%20points='-42.1,2.2%20-21.6,-0.5%205.9,2.5%201.9,21.7%202.8,39.8%20-20.8,44.3%20-38.4,43.9%20-48.4,18.2'%20fill='%23454543'/%3E%3Cpolygon%20points='-30.2,48.8%20-9.3,44.9%207.9,52.8%2010.8,74.5%206.5,86.2%20-6.4,91.9%20-31.2,90.5%20-33.9,70.9'%20fill='%233e403e'/%3E%3Cpolygon%20points='329.8,48.8%20350.7,44.9%20367.9,52.8%20370.8,74.5%20366.5,86.2%20353.6,91.9%20328.8,90.5%20326.1,70.9'%20fill='%233e403e'/%3E%3Cpolygon%20points='16.2,49.2%2062.3,51.8%20118.9,50.6%20117.1,69.5%20114.9,86.3%2065.6,90.3%2022.2,87.6%2014.8,73.3'%20fill='%23434442'/%3E%3Cpolygon%20points='130.4,46.6%20153.3,47.9%20188.8,52.9%20192.3,67.8%20186.8,86.5%20154.6,88.8%20130.5,90.8%20123.8,73.5'%20fill='%233d3a38'/%3E%3Cpolygon%20points='197.7,48.9%20210.6,51.9%20235.9,45.0%20241.3,68.6%20233.8,90.1%20214.7,87.0%20198.1,90.7%20193.6,73.3'%20fill='%23343634'/%3E%3Cpolygon%20points='250.6,50.8%20270.7,47.7%20291.9,45.7%20290.3,64.0%20293.9,85.2%20271.8,89.7%20248.2,89.9%20244.8,63.7'%20fill='%2344413f'/%3E%3Cpolygon%20points='298.1,52.8%20346.3,49.2%20389.2,52.5%20391.5,64.6%20392.0,91.6%20342.8,88.0%20300.3,86.9%20299.7,61.7'%20fill='%233d3f3d'/%3E%3Cpolygon%20points='-61.9,52.8%20-13.7,49.2%2029.2,52.5%2031.5,64.6%2032.0,91.6%20-17.2,88.0%20-59.7,86.9%20-60.3,61.7'%20fill='%233d3f3d'/%3E%3Cpolygon%20points='0.8,94.7%2027.1,94.7%2067.2,94.4%2070.3,122.9%2064.0,141.3%2027.4,138.1%201.5,138.5%20-5.0,126.5'%20fill='%2344413f'/%3E%3Cpolygon%20points='360.8,94.7%20387.1,94.7%20427.2,94.4%20430.3,122.9%20424.0,141.3%20387.4,138.1%20361.5,138.5%20355.0,126.5'%20fill='%2344413f'/%3E%3Cpolygon%20points='76.5,93.6%2097.1,94.1%20119.4,97.3%20118.8,120.7%20119.5,139.0%2094.4,144.2%2076.1,141.5%2075.1,125.7'%20fill='%23373937'/%3E%3Cpolygon%20points='131.1,96.5%20183.8,93.6%20233.3,94.8%20239.5,118.1%20234.6,144.0%20189.1,140.1%20131.5,144.5%20130.7,113.7'%20fill='%23414240'/%3E%3Cpolygon%20points='242.9,91.6%20287.1,95.4%20333.3,98.2%20331.2,112.9%20332.7,142.3%20282.8,145.1%20248.7,138.8%20245.6,111.6'%20fill='%23373735'/%3E%3Cpolygon%20points='340.3,94.5%20370.3,94.1%20380.7,92.6%20383.5,122.0%20383.8,137.2%20371.0,141.5%20339.1,139.7%20341.0,122.1'%20fill='%23414341'/%3E%3Cpolygon%20points='-19.7,94.5%2010.3,94.1%2020.7,92.6%2023.5,122.0%2023.8,137.2%2011.0,141.5%20-20.9,139.7%20-19.0,122.1'%20fill='%23414341'/%3E%3Cpolygon%20points='2.8,143.8%2036.8,144.1%2055.3,149.2%2060.2,176.5%2056.0,198.4%2041.7,202.6%20-2.9,196.2%20-0.6,177.3'%20fill='%23333634'/%3E%3Cpolygon%20points='362.8,143.8%20396.8,144.1%20415.3,149.2%20420.2,176.5%20416.0,198.4%20401.7,202.6%20357.1,196.2%20359.4,177.3'%20fill='%23333634'/%3E%3Cpolygon%20points='68.5,150.2%20120.5,144.2%20173.1,143.7%20178.1,176.6%20177.9,196.8%20117.6,197.0%2067.1,203.0%2067.3,181.6'%20fill='%233b3e3c'/%3E%3Cpolygon%20points='192.5,150.8%20201.2,144.1%20225.4,150.5%20232.0,175.5%20228.2,196.6%20200.5,201.4%20187.2,201.4%20190.0,170.0'%20fill='%23454745'/%3E%3Cpolygon%20points='240.1,145.0%20292.6,145.6%20346.3,148.2%20349.3,178.7%20345.4,202.1%20298.2,198.5%20237.7,196.8%20234.6,183.3'%20fill='%23363432'/%3E%3Cpolygon%20points='353.4,144.0%20408.5,142.6%20464.9,145.0%20463.3,171.2%20459.7,201.7%20412.9,201.4%20355.3,196.9%20352.3,170.7'%20fill='%23464846'/%3E%3Cpolygon%20points='-6.6,144.0%2048.5,142.6%20104.9,145.0%20103.3,171.2%2099.7,201.7%2052.9,201.4%20-4.7,196.9%20-7.7,170.7'%20fill='%23464846'/%3E%3Cpolygon%20points='6.7,208.8%2032.1,204.4%2061.0,208.7%2064.5,225.2%2061.9,247.0%2030.7,251.8%203.0,248.6%200.0,219.2'%20fill='%23383937'/%3E%3Cpolygon%20points='366.7,208.8%20392.1,204.4%20421.0,208.7%20424.5,225.2%20421.9,247.0%20390.7,251.8%20363.0,248.6%20360.0,219.2'%20fill='%23383937'/%3E%3Cpolygon%20points='71.3,201.2%2086.9,202.4%20109.9,205.7%20115.2,226.8%20114.0,252.3%2089.5,255.0%2074.1,249.6%2075.9,222.6'%20fill='%233f3c3a'/%3E%3Cpolygon%20points='125.7,205.1%20169.8,203.4%20228.6,205.0%20233.3,231.9%20229.0,251.5%20173.6,248.1%20125.5,253.4%20122.7,237.4'%20fill='%23494745'/%3E%3Cpolygon%20points='240.1,208.7%20256.9,203.0%20287.6,201.4%20287.2,222.5%20288.3,249.0%20254.0,251.7%20235.6,254.5%20239.2,217.6'%20fill='%23464846'/%3E%3Cpolygon%20points='302.5,207.8%20338.4,201.9%20371.1,202.8%20373.2,227.7%20368.7,253.8%20333.4,255.3%20298.3,247.4%20298.1,224.1'%20fill='%23414442'/%3E%3Cpolygon%20points='-57.5,207.8%20-21.6,201.9%2011.1,202.8%2013.2,227.7%208.7,253.8%20-26.6,255.3%20-61.7,247.4%20-61.9,224.1'%20fill='%23414442'/%3E%3Cpolygon%20points='-1.5,258.0%2044.8,253.1%2097.9,256.9%20104.8,281.8%2094.8,300.7%2044.7,305.7%20-4.7,302.7%20-3.9,287.7'%20fill='%23454745'/%3E%3Cpolygon%20points='358.5,258.0%20404.8,253.1%20457.9,256.9%20464.8,281.8%20454.8,300.7%20404.7,305.7%20355.3,302.7%20356.1,287.7'%20fill='%23454745'/%3E%3Cpolygon%20points='109.8,255.3%20130.5,252.6%20157.1,261.0%20164.0,275.0%20156.1,306.3%20135.7,300.6%20106.7,305.0%20105.1,273.3'%20fill='%23434543'/%3E%3Cpolygon%20points='165.9,255.9%20223.6,256.0%20277.0,256.2%20274.3,277.4%20277.6,304.5%20222.5,305.8%20168.3,302.0%20163.0,275.3'%20fill='%234a4745'/%3E%3Cpolygon%20points='289.5,254.6%20318.9,252.1%20358.9,255.0%20356.5,278.8%20356.1,306.0%20313.8,307.4%20288.0,305.8%20281.2,273.4'%20fill='%23413e3c'/%3E%3Cpolygon%20points='-70.5,254.6%20-41.1,252.1%20-1.1,255.0%20-3.5,278.8%20-3.9,306.0%20-46.2,307.4%20-72.0,305.8%20-78.8,273.4'%20fill='%23413e3c'/%3E%3Cpolygon%20points='-47.9,309.1%20-11.5,305.5%208.0,312.6%2015.1,330.0%2011.5,358.0%20-6.6,361.5%20-45.6,358.8%20-52.6,332.8'%20fill='%233f3d3b'/%3E%3Cpolygon%20points='312.1,309.1%20348.5,305.5%20368.0,312.6%20375.1,330.0%20371.5,358.0%20353.4,361.5%20314.4,358.8%20307.4,332.8'%20fill='%233f3d3b'/%3E%3Cpolygon%20points='19.3,305.4%2047.5,311.4%2063.0,308.8%2067.7,334.7%2064.4,358.9%2053.3,356.1%2022.2,355.4%2018.5,333.5'%20fill='%23434240'/%3E%3Cpolygon%20points='81.2,309.0%20125.6,305.8%20187.3,313.0%20186.6,329.5%20181.1,354.5%20120.7,356.7%2074.7,354.9%2073.1,330.3'%20fill='%233b3937'/%3E%3Cpolygon%20points='198.0,306.7%20254.4,306.2%20303.0,309.0%20304.6,331.6%20299.9,358.5%20254.8,360.3%20198.8,353.7%20196.2,330.2'%20fill='%23363432'/%3E%3Cpolygon%20points='315.5,312.7%20339.9,305.0%20368.4,311.1%20374.4,330.7%20372.7,356.9%20334.8,361.4%20316.4,357.2%20309.7,330.1'%20fill='%23484846'/%3E%3Cpolygon%20points='-44.5,312.7%20-20.1,305.0%208.4,311.1%2014.4,330.7%2012.7,356.9%20-25.2,361.4%20-43.6,357.2%20-50.3,330.1'%20fill='%23484846'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M162.9%20201.5%20L170.7%20201.7%20L181.7%20201.5%20L192.1%20194.6%20L196.8%20181.6%20L202.6%20172.3%20L202.3%20165.6%20L203.3%20153.4'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M163.8%20202.4%20L171.6%20202.6%20L182.6%20202.4%20L193.0%20195.5%20L197.7%20182.5%20L203.5%20173.2%20L203.2%20166.5%20L204.2%20154.3'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M181.7%20201.5%20L185.6%20207.1%20L189.0%20211.5'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M182.6%20202.4%20L186.5%20208.0%20L189.9%20212.4'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M202.6%20172.3%20L198.4%20168.1%20L193.2%20167.0'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M203.5%20173.2%20L199.3%20169.0%20L194.1%20167.9'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M305.0%200.2%20L301.2%208.9%20L300.5%2016.0%20L292.2%2025.0%20L291.5%2035.0'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M305.9%201.1%20L302.1%209.8%20L301.4%2016.9%20L293.1%2025.9%20L292.4%2035.9'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M305.0%20360.2%20L301.2%20368.9%20L300.5%20376.0%20L292.2%20385.0%20L291.5%20395.0'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M305.9%20361.1%20L302.1%20369.8%20L301.4%20376.9%20L293.1%20385.9%20L292.4%20395.9'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M301.2%208.9%20L307.8%2012.4%20L312.6%2014.3'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M302.1%209.8%20L308.7%2013.3%20L313.5%2015.2'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M301.2%20368.9%20L307.8%20372.4%20L312.6%20374.3'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M302.1%20369.8%20L308.7%20373.3%20L313.5%20375.2'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M292.2%2025.0%20L295.0%2031.3%20L301.3%2035.5'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M293.1%2025.9%20L295.9%2032.2%20L302.2%2036.4'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M219.7%20298.9%20L214.3%20302.6%20L208.7%20308.1%20L202.8%20314.3%20L200.8%20320.0'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M220.6%20299.8%20L215.2%20303.5%20L209.6%20309.0%20L203.7%20315.2%20L201.7%20320.9'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M294.4%2089.8%20L300.2%2099.6%20L314.5%20105.5%20L322.7%20114.7%20L323.2%20123.0%20L321.2%20135.4'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M295.3%2090.7%20L301.1%20100.5%20L315.4%20106.4%20L323.6%20115.6%20L324.1%20123.9%20L322.1%20136.3'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M300.2%2099.6%20L307.1%2098.0%20L314.4%2094.8'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M301.1%20100.5%20L308.0%2098.9%20L315.3%2095.7'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M314.5%20105.5%20L316.5%20114.9%20L320.1%20119.2%20L320.4%20124.6'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M315.4%20106.4%20L317.4%20115.8%20L321.0%20120.1%20L321.3%20125.5'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M322.7%20114.7%20L325.8%20112.7%20L332.0%20111.1%20L338.1%20111.3'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M323.6%20115.6%20L326.7%20113.6%20L332.9%20112.0%20L339.0%20112.2'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M321.2%20135.4%20L324.2%20137.2%20L325.6%20140.2%20L330.6%20142.8'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M322.1%20136.3%20L325.1%20138.1%20L326.5%20141.1%20L331.5%20143.7'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M4.5%2026.0%20L11.5%2039.8%20L13.5%2053.7%20L10.5%2062.4%20L15.0%2075.9'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M5.4%2026.9%20L12.4%2040.7%20L14.4%2054.6%20L11.4%2063.3%20L15.9%2076.8'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M364.5%2026.0%20L371.5%2039.8%20L373.5%2053.7%20L370.5%2062.4%20L375.0%2075.9'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M365.4%2026.9%20L372.4%2040.7%20L374.4%2054.6%20L371.4%2063.3%20L375.9%2076.8'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M82.9%20251.4%20L77.0%20256.4%20L74.0%20262.6%20L68.5%20269.3%20L64.3%20278.5%20L59.2%20283.5%20L55.9%20289.2%20L46.2%20295.3'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M83.8%20252.3%20L77.9%20257.3%20L74.9%20263.5%20L69.4%20270.2%20L65.2%20279.4%20L60.1%20284.4%20L56.8%20290.1%20L47.1%20296.2'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M64.3%20278.5%20L57.9%20282.9%20L50.8%20283.8%20L41.7%20282.8'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M65.2%20279.4%20L58.8%20283.8%20L51.7%20284.7%20L42.6%20283.7'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M59.2%20283.5%20L57.8%20288.3%20L55.1%20292.5%20L50.8%20297.1'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M60.1%20284.4%20L58.7%20289.2%20L56.0%20293.4%20L51.7%20298.0'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M145.9%2068.4%20L143.6%2062.8%20L139.3%2054.0%20L139.0%2042.1%20L135.2%2034.1%20L132.9%2028.7%20L134.9%2020.0'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M146.8%2069.3%20L144.5%2063.7%20L140.2%2054.9%20L139.9%2043.0%20L136.1%2035.0%20L133.8%2029.6%20L135.8%2020.9'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M135.2%2034.1%20L128.0%2030.4%20L121.7%2027.7'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M136.1%2035.0%20L128.9%2031.3%20L122.6%2028.6'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M132.9%2028.7%20L137.5%2023.6%20L140.5%2018.5%20L140.1%209.8'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M133.8%2029.6%20L138.4%2024.5%20L141.4%2019.4%20L141.0%2010.7'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M132.9%20388.7%20L137.5%20383.6%20L140.5%20378.5%20L140.1%20369.8'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M133.8%20389.6%20L138.4%20384.5%20L141.4%20379.4%20L141.0%20370.7'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M332.7%2044.5%20L324.9%2055.5%20L318.7%2071.5%20L317.2%2080.5%20L313.7%2095.9%20L320.5%20110.6%20L330.4%20123.2%20L331.7%20136.5'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M333.6%2045.4%20L325.8%2056.4%20L319.6%2072.4%20L318.1%2081.4%20L314.6%2096.8%20L321.4%20111.5%20L331.3%20124.1%20L332.6%20137.4'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M320.5%20110.6%20L330.6%20115.2%20L339.7%20120.2%20L348.1%20120.5'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M321.4%20111.5%20L331.5%20116.1%20L340.6%20121.1%20L349.0%20121.4'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M330.4%20123.2%20L337.0%20119.9%20L341.9%20114.2%20L346.1%20109.6'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M331.3%20124.1%20L337.9%20120.8%20L342.8%20115.1%20L347.0%20110.5'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M217.9%2010.0%20L224.7%2013.6%20L233.2%2018.9%20L237.0%2026.9%20L245.2%2032.8%20L249.3%2042.5%20L257.8%2050.4%20L270.4%2053.3'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M218.8%2010.9%20L225.6%2014.5%20L234.1%2019.8%20L237.9%2027.8%20L246.1%2033.7%20L250.2%2043.4%20L258.7%2051.3%20L271.3%2054.2'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M217.9%20370.0%20L224.7%20373.6%20L233.2%20378.9%20L237.0%20386.9%20L245.2%20392.8%20L249.3%20402.5%20L257.8%20410.4%20L270.4%20413.3'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='3.2'/%3E%3Cpath%20d='M218.8%20370.9%20L225.6%20374.5%20L234.1%20379.8%20L237.9%20387.8%20L246.1%20393.7%20L250.2%20403.4%20L258.7%20411.3%20L271.3%20414.2'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.6'/%3E%3Cpath%20d='M224.7%2013.6%20L230.8%2011.1%20L235.8%204.1'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M225.6%2014.5%20L231.7%2012.0%20L236.7%205.0'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M224.7%20373.6%20L230.8%20371.1%20L235.8%20364.1'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M225.6%20374.5%20L231.7%20372.0%20L236.7%20365.0'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3Cpath%20d='M270.4%2053.3%20L276.1%2051.7%20L282.1%2050.3%20L285.2%2048.1'%20stroke='%23000'%20stroke-opacity='.9'%20stroke-width='2'/%3E%3Cpath%20d='M271.3%2054.2%20L277.0%2052.6%20L283.0%2051.2%20L286.1%2049.0'%20stroke='%23fff'%20stroke-opacity='.13'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E"); }
#title {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 150, 60, 0.24), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.45)),
    var(--wall) 0 0 / 360px 360px,
    #2a2a2c;
}
/* 対局・設定の画面も同じ石の壁に（文字が読みやすいよう少し暗く） */
#game { background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--wall) 0 0 / 360px 360px, #2a2a2c; }
#settings-pop { background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), radial-gradient(ellipse at 50% 0%, rgba(255, 150, 60, 0.18), transparent 60%), var(--wall) 0 0 / 360px 360px, #2a2a2c; }
/* 記録のお知らせを閉じたあとも、右上の ⚙ がロゴに重ならないように */
#title:has(#save-note[hidden]) .title-wrap { margin-top: 46px; }
.top-bar { gap: 4px; }
.top-bar button { white-space: nowrap; padding-left: 9px; padding-right: 9px; }
@media (max-width: 400px) { .top-bar button { font-size: 12px; padding-left: 7px; padding-right: 7px; } }

/* ---------- ピクセル風（背景の石垣・ロゴ・サブタイトルはそのまま）：ドットの字、角のない四角、黒いふちとカクッとした影 ---------- */
:root { --px-font: 'DotGothic16', 'Hiragino Sans', monospace; }
body, button, input, select, textarea { font-family: var(--px-font); }
.logo, .sublogo { font-family: var(--font-logo); }
.sublogo { font-family: var(--font-en); }
.dg-text b { font-family: var(--px-font) !important; font-weight: 400 !important; text-shadow: 2px 2px 0 #000 !important; }
/* マス・ボタン */
.home-tile, .local-btn, .tut-tile, #title .on-item, #title .sub-btn, .fs-big, .home-gear, #save-note, .rank-card .home-tile.wide,
.top-bar button, .controls button, #online-body button, .sp-head button, .m-buttons button, .tut-pick-list button, #bg-found button {
  border-radius: 0 !important; border: 3px solid #111 !important;
  background: #4a4846 !important; color: #f1ede6;
  box-shadow: inset -3px -3px 0 #2f2e2c, inset 3px 3px 0 #6a6763, 3px 3px 0 rgba(0, 0, 0, 0.55) !important;
}
.home-tile b, .local-btn b, .tut-tile b, #title .on-item { font-weight: 400 !important; text-shadow: 2px 2px 0 #000; }
.home-tile small, .local-btn small { color: #d8d2c6 !important; }
.rank-card .home-tile.wide { background: #7a3d1c !important; box-shadow: inset -3px -3px 0 #4a220e, inset 3px 3px 0 #b8622c, 4px 4px 0 rgba(0, 0, 0, 0.6) !important; }
.rank-card .home-tile.wide b { font-size: 26px !important; color: #ffe08a !important; text-shadow: 2px 2px 0 #2a1000; }
.card-tag { border-radius: 0 !important; border: 2px solid #111 !important; background: #2a2826 !important; color: #ffd36a !important; box-shadow: 2px 2px 0 #000 !important; }
.dungeon-btn { border-radius: 0 !important; border: 3px solid #111 !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6) !important; }
.home-gear { width: 40px; height: 40px; }
/* 赤いボタン（部屋を作る・この設定で閉じる など）はピクセルの赤に */
#online-body button.accent, .sp-ok, .m-buttons button.accent, #bg-found button.accent, .controls button.accent, .tut-pick-list button.accent {
  background: #c8321c !important; box-shadow: inset -3px -3px 0 #7a1608, inset 3px 3px 0 #ff7a52, 3px 3px 0 rgba(0, 0, 0, 0.55) !important; }
.sp-ok { border-radius: 0 !important; border: 3px solid #111 !important; }
/* チップ（設定の選ぶボタン） */
.chip { border-radius: 0 !important; border: 2px solid #111 !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important; background: #3e3c3a !important; }
.chip[aria-pressed="true"] { background: #6a4a1c !important; color: #ffe08a !important; box-shadow: inset 2px 2px 0 #8a6428, 2px 2px 0 rgba(0, 0, 0, 0.5) !important; }
.sp-tabs { border-radius: 0 !important; border: 2px solid #111; }
.sp-tabs button { border-radius: 0 !important; }
.sp-tabs button[aria-selected="true"] { background: #c8321c !important; }
/* 対局の札（プレイヤーの欄）・ポップアップ */
.player, #online-pop, #dojo-pop, #rules-pop, #log-pop, #kifu-pop, .modal-box, #bg-found, #settings-pop .sp-panel .rule-row {
  border-radius: 0 !important; }
.player { border: 3px solid #111 !important; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.5) !important; }
#online-pop, #dojo-pop, #rules-pop, #log-pop, #kifu-pop, .modal-box, #bg-found { border: 3px solid #111 !important; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6) !important; }
.hp-bar { border-radius: 0 !important; border: 1px solid #000; }
.hp-fill { border-radius: 0 !important; }
/* 下のタブ */
.home-tabs { border-top: 3px solid #111 !important; }
.player.active { border-color: #ff3b2f !important; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px #ff3b2f !important; }
.log-head button { border-radius: 0 !important; border: 2px solid #111 !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important; }
/* ピクセルのふちで少し背が高くなった分、背の低いスマホでは詰める */
@media (max-height: 720px) {
  .rank-card .home-tile.wide { padding: 12px 14px; }
  .rank-card .home-tile.wide b { font-size: 22px !important; }
  .home-tile.wide, .local-btn { padding-top: 7px; padding-bottom: 7px; }
  .dungeon-btn.dg-small { padding-top: 8px; padding-bottom: 8px; }
  #title .fs-big { padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- PC：スマホと同じ並びのまま、文字やボタンを大きく ---------- */
#title > *:not(#settings-pop) { zoom: var(--hz, 1); }
#game > :not(#board-wrap) { zoom: var(--gz, 1); }
/* PC のホームは、スマホ（幅 390 くらい）と同じ大きさのロゴにしてから、画面全体をまとめて拡大する */
@media (min-width: 900px) and (min-height: 600px) and (pointer: fine) {
  #title .logo { font-size: 52px; }
  #title .sublogo { font-size: 20px; }
  #title .tab-pane, #title #save-note, #title #maint-note { width: 390px; max-width: 390px; }
}
/* PC のホーム：タイトルを大きく、マスを横長に（横の余白を減らす） */
@media (min-width: 900px) and (min-height: 600px) and (pointer: fine) {
  #title .logo { font-size: 104px; }
  #title .sublogo { font-size: 30px; }
  #title .tab-pane { width: 660px; max-width: 660px; }
  #title #save-note, #title #maint-note { width: auto; max-width: 660px; }
}
#title .tab-pane > .beginner, #title .tab-pane .tut-tile { width: 100%; }
#title .tab-pane > .beginner { max-width: none; }
/* PC の対局：碁盤をなるべく大きくするため、まわりの余白と名前欄を少し詰める */
@media (min-width: 900px) and (min-height: 600px) and (pointer: fine) {
  #game { gap: 6px; padding-top: 6px; padding-bottom: 8px; }
  #game .player { padding-top: 4px; padding-bottom: 4px; }
}
/* 破壊の迷宮のメンテナンス中：たいまつを消して暗く */
.dungeon-btn.maint { filter: grayscale(0.8) brightness(0.7); }
.dungeon-btn.maint .dg-fire { display: none; }
.dungeon-btn.maint .card-tag { display: none; }
.dj-stage.locked { opacity: 0.45; filter: grayscale(0.8); cursor: not-allowed; }
.dj-maint { margin: 8px 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; color: #e9d6b4; background: rgba(0, 0, 0, 0.35); border: 2px solid #111; }

/* ランクマッチの右上：「観戦」と「演出」の札は同じ大きさで縦に並べる */
.rank-card .watch-tag, .rank-card .fx-tag { width: 86px; text-align: center; padding-left: 0; padding-right: 0; white-space: nowrap; }
.rank-card .fx-tag { top: 40px; cursor: pointer; }
.rank-card .fx-tag:active { transform: scale(0.95); }
/* 演出を選ぶ窓（下から出る） */
#fx-pick { position: fixed; inset: 0; z-index: 42; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; }
#fx-pick[hidden] { display: none; }
.fx-pick-box { width: min(520px, 100%); background: #2b2a28; border: 3px solid #111; border-bottom: 0; box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.5); padding: 14px 16px max(18px, env(safe-area-inset-bottom)); }
.fx-pick-head { display: flex; align-items: center; margin-bottom: 4px; }
.fx-pick-head b { color: #ffd36a; font-size: 18px; font-weight: 400; }
.fx-pick-head button { margin-left: auto; border: 2px solid #111; background: #3e3c3a; color: #f1ede6; padding: 4px 12px; font: inherit; font-size: 13px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.fx-pick-note { margin: 2px 0 10px; font-size: 12px; line-height: 1.6; color: #c8c0b4; }
.fx-pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-pick-pv, .fx-pick-go { display: block; width: 100%; margin-top: 10px; padding: 11px; font: inherit; font-size: 15px; color: #f1ede6; border: 3px solid #111; background: #4a4846; box-shadow: inset -3px -3px 0 #2f2e2c, inset 3px 3px 0 #6a6763, 3px 3px 0 rgba(0, 0, 0, 0.55); }
.fx-pick-go { background: #c8321c !important; box-shadow: inset -3px -3px 0 #7a1608, inset 3px 3px 0 #ff7a52, 3px 3px 0 rgba(0, 0, 0, 0.55) !important; }
.m-onfx { margin: 10px 0 4px; text-align: left; }
.m-onfx[hidden] { display: none; }
.m-onfx .tr-label { display: block; margin-bottom: 6px; color: #ffd36a; }
.rank-card .fx-tag { top: 8px; }
.rank-card .watch-tag { top: 40px; }
@media (max-height: 720px) { .rank-card .fx-tag { top: 5px; } .rank-card .watch-tag { top: 33px; } .rank-card .home-tile.wide { min-height: 92px; } }