/* Tempo Devil — 裏切る機械式メトロノーム。生成り地、墨の太線、朱は罠とずれにだけ使う（ux.md） */
:root {
  --paper: #EFE6D2;
  --paper-2: #E5DAC0;
  --ink: #1B1A17;
  --ink-soft: #4A463D;
  --red: #E2412C;
  --red-text: #B5301F;
  --line: 3px;
  --bar: 56px;
  --slab: "Rockwell Extra Bold", "Rockwell", "Roboto Slab", "Courier Prime", "American Typewriter", "Courier New", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  /* 余白に出る目盛り板の模様 */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(27,26,23,.16) 15px 16px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(27,26,23,.34) 79px 81px);
  background-size: 14px 100%, 28px 100%;
  background-repeat: no-repeat;
  background-position: left 0 top 0, left 0 top 0;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--paper); }
[hidden] { display: none !important; }

/* ---- 上部 ---- */
.top {
  position: fixed; inset: 0 0 auto 0; height: calc(var(--bar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; gap: 5px; margin-left: 4px; }
.brand i { display: block; width: 4px; height: 18px; background: var(--ink); transform-origin: bottom; }
.brand i:first-child { transform: rotate(-14deg); } .brand i:last-child { transform: rotate(14deg); }
.top-tools { display: flex; gap: 8px; align-items: stretch; }
.tool {
  height: 40px; min-width: 44px; padding: 0 10px; background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: 0; font-weight: 800; font-size: 13px; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.tool.icon { padding: 0; width: 44px; }
.tool svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: square; }
.tool svg rect { fill: var(--paper); }
.tool svg .spk { fill: var(--ink); } .tool svg .cut { display: none; stroke: var(--red-text); stroke-width: 2.6; }
body.muted #mute-toggle .wave { display: none; } body.muted #mute-toggle .cut { display: block; }
.tool .sl { opacity: .45; }
[data-l] { padding: 1px 5px; opacity: .55; }
html[lang="ja"] [data-l="ja"], html[lang="en"] [data-l="en"] { background: var(--ink); color: var(--paper); opacity: 1; }

/* ---- 画面の共通 ---- */
main { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: calc(var(--bar) + env(safe-area-inset-top)); }
.col { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 20px; }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html[lang="ja"] .wordmark { font-family: var(--sans); font-weight: 900; letter-spacing: .06em; }
.wordmark { font-family: var(--slab); font-weight: 900; font-size: 30px; letter-spacing: .01em; margin: 6px 0 0; text-align: center; line-height: 1.1; }
.tagline { text-align: center; margin: 8px 0 0; font-weight: 700; font-size: 17px; }
.notice { margin: 8px 0 0; padding: 6px 10px; border: 2px dashed var(--ink); font-size: 13px; font-weight: 700; text-align: center; }

/* 下に固定するボタン */
.dock { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dock.fixed { background: linear-gradient(to top, var(--paper) 70%, rgba(239,230,210,0)); }
.primary {
  background: var(--ink); color: var(--paper); border: var(--line) solid var(--ink); border-radius: 0; width: 100%;
  font-weight: 900; font-size: 22px; letter-spacing: .08em; padding: 0 18px; min-height: 52px;
  clip-path: polygon(0 0, 97% 0, 100% 22%, 100% 100%, 3% 100%, 0 78%);
}
.primary.big { min-height: 72px; font-size: 28px; }
.primary:active { transform: translateY(2px); }
.small { background: var(--paper); border: var(--line) solid var(--ink); border-radius: 0; min-height: 40px; padding: 0 14px; font-weight: 800; font-size: 14px; }
.small:active { background: var(--ink); color: var(--paper); }
.link { background: none; border: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 800; min-height: 44px; padding: 0 12px; font-size: 15px; }

/* ---- 輪 ---- */
.ring-slot { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 0 auto; }
.ring { position: relative; width: 100%; height: 100%; }
.ring-svg { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; }
.ring-svg .tick { stroke: var(--ink); stroke-width: 1.6; }
.ring-svg .tick.long { stroke-width: 3; }
.ring-svg .main { fill: none; stroke: var(--ink); stroke-width: 15; transition: stroke .12s; }
.ring-svg .inner { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; }
.ring-svg .echo { fill: none; stroke: var(--ink); stroke-width: 3; opacity: 0; transform-origin: 150px 150px; }
.ring-svg .body { transform-origin: 150px 150px; }
.ring-svg .dot { fill: var(--ink); }
.ring-svg .dots { transform-origin: 150px 150px; transition: transform .2s; }
.ring-svg .horn { stroke: var(--ink); stroke-width: 6; stroke-linecap: butt; }
.ring-svg .cue-stain { fill: none; stroke: var(--red); stroke-width: 15; opacity: 0; }
.ring-svg .cue-decoy { fill: none; stroke: var(--red); stroke-width: 5; stroke-dasharray: 3 8; stroke-linecap: round; opacity: 0; transform-origin: 150px 150px; }
.ring-svg .atick { stroke: var(--red); stroke-width: 3.4; opacity: 0; }
.ring-svg .atick.on { opacity: 1; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ring-num { font-family: var(--slab); font-weight: 900; font-size: 92px; line-height: 1; min-height: 92px; font-variant-numeric: tabular-nums; -webkit-text-stroke: 0 var(--ink); }
.ring-num.rest { opacity: .35; }
.ring-bar { display: flex; gap: 12px; margin-top: 6px; font-family: var(--slab); font-weight: 800; font-size: 17px; }
.ring-bar span { width: 20px; text-align: center; opacity: .3; }
.ring-bar span.on { opacity: 1; border-bottom: 3px solid var(--ink); }
/* 手がかり（音を使わない視覚） */
.ring.cue-accel .atick { transition: opacity .1s; }
.ring.cue-mute .ring-num { color: transparent; -webkit-text-stroke: 2.5px var(--ink); }
.ring.cue-offbeat .cue-stain { opacity: 1; }
.ring.cue-offbeat .dots { transform: rotate(90deg); }
.ring.cue-offbeat .main { stroke: var(--ink); }
.ring.cue-decoy .cue-decoy { opacity: .95; animation: decoy .5s steps(2, end) infinite; }
.ring.cue-last .cue-stain { stroke-width: 18; }
@keyframes decoy { 0% { transform: scale(1) rotate(0); opacity: .95; } 50% { transform: scale(1.025) rotate(6deg); opacity: .25; } 100% { transform: scale(1) rotate(0); opacity: .95; } }
.ring.idle .body { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* ---- スタート ---- */
#screen-start .ring-slot { margin-top: 22px; }
#screen-start .ring-num { color: var(--ink-soft); }
.start-info { margin-top: 14px; text-align: center; min-height: 80px; }
.today { margin: 0; font-weight: 800; font-size: 16px; min-height: 24px; }
.today-name { display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.today { white-space: nowrap; }
.today.sk, .sk { background: repeating-linear-gradient(90deg, #d4c8ac 0 12px, #dccfb4 12px 24px); min-height: 22px; animation: sk 1.1s steps(2) infinite; }
.today.sk { width: 70%; margin: 0 auto; }
@keyframes sk { 50% { opacity: .55; } }
.best { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
#screen-start .col { flex: 1; }

/* ---- プレイ ---- */
#screen-play { padding-top: 0; }
#tap-area {
  position: fixed; inset: calc(var(--bar) + env(safe-area-inset-top)) 0 0 0; touch-action: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; padding: 0 20px calc(14px + env(safe-area-inset-bottom));
}
.hud { width: 100%; max-width: 520px; display: flex; justify-content: space-between; align-items: flex-end; min-height: 64px; position: relative; }
.hud-cell { display: flex; flex-direction: column; align-items: flex-start; }
.hud-cell.right { align-items: flex-end; }
.hud-k { font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.hud-v { font-family: var(--slab); font-weight: 900; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
#hud-bpm.jit { animation: jit .09s steps(2) infinite; color: var(--red-text); }
@keyframes jit { 0% { transform: translate(-1.5px, 0); } 100% { transform: translate(1.5px, 1px); } }
.test-banner { position: absolute; left: 0; right: 0; top: -2px; text-align: center; margin: 0; font-size: 12px; font-weight: 800; padding: 0 70px; }
#screen-play .ring-slot { margin-top: 18px; }
.arrow { position: absolute; top: 50%; font-size: 30px; color: var(--red-text); opacity: 0; transform: translateY(-50%); z-index: 2; }
.arrow.l { left: -34px; } .arrow.r { right: -34px; } .arrow.on { opacity: 1; }
.reaction { min-height: 86px; margin-top: 16px; width: 100%; max-width: 480px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; visibility: hidden; }
.reaction.on { visibility: visible; }
.r-trap { font-weight: 900; font-size: 15px; color: var(--red-text); letter-spacing: .04em; }
.r-trap:empty { display: none; }
.r-text { font-weight: 900; font-size: 22px; line-height: 1.3; }
.reaction.strike .r-text { color: var(--red-text); }
.reaction.hit .r-text, .reaction.test .r-text { font-family: var(--slab); font-size: 26px; }
.reaction.spot .r-text { background: var(--ink); color: var(--paper); padding: 4px 14px; }
.strikes { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pip { width: 30px; height: 30px; border: var(--line) solid var(--ink); display: inline-flex; align-items: center; justify-content: center; transform: rotate(45deg); }
.pip i { display: block; width: 14px; height: 14px; background: var(--ink); transform: rotate(-45deg); }
.pip.lit { border-color: var(--red-text); background: var(--red); }
.pip.lit i { background: none; position: relative; width: 14px; height: 14px; }
.pip.lit i::before, .pip.lit i::after { content: ""; position: absolute; left: 6px; top: -1px; width: 3px; height: 16px; background: var(--ink); transform: rotate(45deg); }
.pip.lit i::after { transform: rotate(-45deg); }
.strikes-left { margin-left: 8px; font-weight: 800; font-size: 14px; }
.hint { margin: auto 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); transition: opacity .6s; text-align: center; }
.hint.fade { opacity: 0; }
#play-noaudio { margin-top: 8px; }
body[data-test="1"] .strikes, body[data-test="1"] .hud-cell.right { visibility: hidden; }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: 0; box-shadow: inset 0 0 0 10px var(--red), inset 0 0 70px 18px rgba(226,65,44,.75); }
#flash.go { animation: flash .3s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
body.over #tap-area { pointer-events: none; }

/* 中断 */
#screen-aborted { padding: 0; }
.aborted-btn { position: absolute; inset: calc(var(--bar) + env(safe-area-inset-top)) 0 0 0; background: none; border: 0; font-size: 26px; font-weight: 900; line-height: 1.4; padding: 40px; }
.aborted-btn span { display: inline-block; border: var(--line) solid var(--ink); padding: 18px 22px; background: var(--paper); }

/* ---- 結果 ---- */
.result-wrap { display: block; padding: 6px 0 20px; }
.verdict { text-align: center; padding: 14px 0 8px; }
.v-beats { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; font-weight: 900; font-size: 22px; }
.v-beats b { font-family: var(--slab); font-size: 104px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.v-beats b.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.v-death { margin: 6px 0 0; font-size: 26px; line-height: 1.3; font-weight: 900; color: var(--red-text); display: flex; gap: 10px; align-items: center; justify-content: center; text-wrap: balance; }
.horns { flex: none; width: 22px; height: 24px; position: relative; display: inline-block; }
.horns::before, .horns::after { content: ""; position: absolute; bottom: 0; width: 6px; height: 22px; background: var(--red-text); }
.horns::before { left: 2px; transform: rotate(-18deg); } .horns::after { right: 2px; transform: rotate(18deg); }
.v-how { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.v-meta { margin: 8px 0 0; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.chips { margin: 8px 0 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip { padding: 2px 10px; border: 2px solid var(--ink); font-weight: 800; font-size: 13px; }
.chip.fell { border-color: var(--red-text); color: var(--red-text); }
.chip.spot { background: var(--ink); color: var(--paper); }
.strike-log { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; text-align: left; border-left: 3px solid var(--ink); }
.strike-log li { padding: 1px 10px; counter-increment: s; }
.strike-log b { color: var(--red-text); margin-right: 8px; }
.best-line { text-align: center; margin: 10px 0 0; font-weight: 800; font-size: 14px; min-height: 21px; }
.best-line.new { color: var(--paper); background: var(--ink); display: table; margin: 10px auto 0; padding: 1px 12px; }
.rank-box { margin: 10px 0 0; padding: 10px 12px; border: var(--line) solid var(--ink); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; min-height: 56px; }
.rank-text { margin: 0; font-weight: 900; font-size: 17px; flex: 1 1 auto; min-width: 0; }
.rank-text.sk { height: 22px; max-width: 220px; }
.rank-text b { display: block; } .rank-text .why { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.nick-slot { margin: 14px 0 80px; }
.nick-label { display: block; font-weight: 800; font-size: 13px; }
.nick-row { display: flex; gap: 8px; margin-top: 4px; }
.nick-input { flex: 1; min-width: 0; height: 44px; border: var(--line) solid var(--ink); border-radius: 0; background: #F7F0DF; padding: 0 10px; font-size: 16px; -webkit-user-select: text; user-select: text; }
.nick-count, .nick-hint, .nick-status { margin: 3px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.nick-status { min-height: 18px; color: var(--ink); } .nick-status.bad { color: var(--red-text); }
.side-board { display: none; }
#screen-result .dock.fixed { flex: none; }

/* ---- 順位表 ---- */
.board-head { display: flex; align-items: center; gap: 12px; padding: 0 20px 6px; width: 100%; max-width: 520px; margin: 0 auto; }
.board-head h2 { margin: 0; font-size: 22px; font-weight: 900; font-family: var(--slab); }
.tabs { display: flex; margin: 8px 0 6px; border: var(--line) solid var(--ink); }
.tab { flex: 1; min-height: 48px; background: var(--paper); border: 0; font-weight: 900; font-size: 17px; border-radius: 0; }
.tab + .tab { border-left: var(--line) solid var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.board-total { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: right; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 36px 1fr auto 52px; gap: 8px; align-items: center; padding: 8px 6px; border-bottom: 2px solid rgba(27,26,23,.25); min-height: 46px; font-weight: 700; }
.r-rank { font-family: var(--slab); font-weight: 900; font-size: 18px; text-align: right; }
.row.podium .r-rank { background: var(--red); color: var(--ink); text-align: center; padding: 1px 0; border: 2px solid var(--ink); }
.r-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-you { font-style: normal; font-size: 11px; font-weight: 900; margin-left: 6px; background: var(--ink); color: var(--paper); padding: 0 5px; }
.r-beats { font-family: var(--slab); font-weight: 900; font-variant-numeric: tabular-nums; }
.r-death { font-size: 11px; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.row.mine { border: var(--line) solid var(--red-text); background: rgba(226,65,44,.1); font-weight: 900; }
.row.gap { display: block; text-align: center; border: 0; min-height: 24px; padding: 0; color: var(--ink-soft); }
.row.sk { height: 46px; margin-bottom: 6px; }
.board-msg { padding: 28px 6px; text-align: center; border: var(--line) dashed var(--ink); margin-top: 10px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.msg-title { margin: 0; font-weight: 900; font-size: 18px; } .msg-sub { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
#board-main { padding-bottom: 150px; }
#board-main .nick { margin-top: 18px; }
.band { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); width: min(480px, calc(100% - 28px)); z-index: 10; background: var(--ink); color: var(--paper); border: var(--line) solid var(--red); border-radius: 0; min-height: 46px; font-weight: 900; font-size: 16px; }
.dock.slim { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); background: linear-gradient(to top, var(--paper) 70%, rgba(239,230,210,0)); z-index: 5; }
.back { min-width: 72px; }

/* ---- 設定のシート ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(27,26,23,.5); }
.sheet { position: relative; width: 100%; max-width: 520px; background: var(--paper); border: var(--line) solid var(--ink); border-bottom: 0; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); max-height: 90vh; overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { margin: 0; font-size: 22px; font-weight: 900; }
.field { display: block; margin-top: 14px; font-weight: 900; }
.offset-row { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.step { width: 48px; height: 48px; border: var(--line) solid var(--ink); background: var(--paper); font-size: 24px; font-weight: 900; border-radius: 0; }
#offset-range { flex: 1; accent-color: var(--ink); height: 40px; }
.offset-value { margin: 2px 0 0; font-family: var(--slab); font-size: 32px; font-weight: 900; text-align: center; }
.help { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.test-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.test-row .primary { width: 130px; flex: none; font-size: 18px; min-height: 52px; }
.test-row .help { margin: 0; }
.test-result { min-height: 28px; margin: 8px 0 0; font-weight: 900; font-size: 18px; }
.help.bt { border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 8px; }

/* ---- PC ---- */
@media (min-width: 700px) {
  .col, .dock { max-width: 520px; }
  .wordmark { font-size: 36px; }
  .ring-slot { width: 300px; }
  .top { padding-right: max(12px, calc((100vw - 520px) / 2)); }
  .brand { display: none; }
  .top { justify-content: flex-end; }
  body { background-size: 40px 100%, 80px 100%; }
  .primary:hover { background: #000; }
  .small:hover, .tool:hover, .tab:hover { background: var(--paper-2); }
  .tab[aria-selected="true"]:hover { background: var(--ink); }
}
@media (min-width: 1000px) {
  .top { padding-right: calc((100vw - 980px) / 2); }
}
@media (min-height: 700px) and (max-height: 900px) and (min-width: 700px) {
  .v-beats b { font-size: 84px; }
}
@media (min-width: 1000px) {
  #screen-result .col { max-width: 520px; margin: 0; }
  .result-wrap { display: grid; grid-template-columns: 520px 1fr; gap: 40px; max-width: 1040px; margin: 0 auto; padding: 6px 20px 20px; }
  .side-board { display: block; padding-top: 14px; }
  .side-title { margin: 0 0 6px; font-family: var(--slab); font-size: 20px; font-weight: 900; }
  .side-board .rows { max-height: 560px; overflow-y: auto; }
  #screen-result .dock.fixed { max-width: 1040px; padding-left: 20px; }
  #screen-result .dock .primary { max-width: 520px; align-self: flex-start; }
  #btn-board-result { display: none; }
}
@media (max-height: 700px) {
  .ring-slot { width: min(240px, 66vw); }
  .ring-num { font-size: 72px; min-height: 72px; }
  .reaction { min-height: 64px; margin-top: 8px; }
  .hud { min-height: 52px; }
  .primary.big { min-height: 60px; font-size: 24px; }
  .v-beats b { font-size: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  #hud-bpm.jit, .ring.cue-decoy .cue-decoy, .row.sk, .sk { animation: none; }
  .v-beats b.pop { animation: none; }
  #flash.go { animation-duration: .3s; }
}
/* 日本語の見出しと反応の文はゴシックにする（スラブセリフは数字用） */
html[lang="ja"] .reaction.hit .r-text, html[lang="ja"] .reaction.test .r-text, html[lang="ja"] .board-head h2, html[lang="ja"] .side-title { font-family: var(--sans); font-weight: 900; }
.v-death { flex-direction: column; gap: 4px; font-size: 24px; word-break: auto-phrase; text-wrap: balance; }
.v-death span { max-width: 20em; }
.horns { width: 30px; height: 22px; }
.horns::before, .horns::after { height: 20px; width: 6px; }
.horns::before { left: 3px; transform: rotate(-22deg); } .horns::after { right: 3px; transform: rotate(22deg); }
.scroll { scrollbar-width: none; } .scroll::-webkit-scrollbar { display: none; }
.v-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
/* 上部のバーと一覧が重ならないように、バーに紙の背景を付ける */
.top { background: var(--paper); }
@media (min-width: 700px) { .top { background: transparent; } }
.board-head { position: relative; z-index: 4; background: var(--paper); }
#screen-board .scroll { padding-top: 2px; }
.row { grid-template-columns: 36px 1fr auto 64px; }
.r-death { overflow: hidden; text-overflow: ellipsis; }
.row.mine .r-death { font-weight: 800; }
/* PC でも上部のバーは紙の背景を持つ（スクロールした一覧が透けない）。幅は中央の列にそろえる */
@media (min-width: 700px) { .top { background: var(--paper); border-bottom: 2px solid rgba(27,26,23,.2); } }
.r-name { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.r-name .r-label { display: block; flex: 1 0 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.25; min-width: 0; }
.r-name .r-you { margin-left: 0; }
.r-you { flex: none; margin-left: 0; }
.side-board .rows { position: relative; }
@media (min-width: 700px) {
  body { background-image:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(27,26,23,.16) 15px 16px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(27,26,23,.34) 79px 81px),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(27,26,23,.16) 15px 16px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(27,26,23,.34) 79px 81px);
    background-size: 40px 100%, 80px 100%, 40px 100%, 80px 100%;
    background-position: left 0 top 0, left 0 top 0, right 0 top 0, right 0 top 0; }
}
.aborted-btn span { word-break: auto-phrase; text-wrap: balance; }
@media (min-width: 1000px) { #screen-result .dock.fixed { padding-left: 40px; } #screen-result .dock .primary { max-width: 480px; } }

/* ---- 周回1: 手ごたえと手がかり（ux） ---- */
.ring-svg .ticks, .ring-svg .fx, .ring-svg .cue-waltz { transform-origin: 150px 150px; }
.ring-svg .ripple { fill: none; stroke: var(--ink); stroke-width: 6; opacity: 0; transform-origin: 150px 150px; pointer-events: none; }
.ring-center { transform-origin: 50% 50%; }
/* 突然の3拍子: 目盛りを3つに割る朱の楔と、「1 2 3 ×」に変わる拍の列 */
.ring-svg .wedge { stroke: var(--red); stroke-width: 9; stroke-linecap: butt; opacity: 0; }
.ring.cue-waltz .wedge { opacity: 1; }
.ring.cue-waltz .ring-bar { color: var(--red-text); font-size: 24px; gap: 8px; padding: 2px 10px 0; border: 3px solid var(--red); background: var(--paper); }
.ring.cue-waltz .ring-bar span { width: 24px; opacity: 1; }
.ring.cue-waltz .ring-bar span:nth-child(4) { text-decoration: line-through; opacity: 1; }
.ring.cue-waltz .ring-bar span.on { border-bottom-color: var(--red-text); }
.ring.cue-waltz.cue-last .ring-bar { background: var(--red); color: var(--paper); }
.ring.cue-waltz.cue-last .ring-bar span.on { border-bottom-color: var(--paper); }
/* 手がかりが重なっても読めるよう、種類ごとに半径を分ける: 偽の音=外側の点線(r164)、加速=目盛りの外(r147-158)、3拍子=目盛りの内(r125-150)、半拍ずれ=輪の本体 */
@media (prefers-reduced-motion: reduce) {
  .ring.cue-decoy .cue-decoy { animation: none; }
}
.rank-main { flex: 1 1 auto; min-width: 0; }
.rank-why { margin: 3px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.4; }
.rank-why:empty { display: none; }
/* 「見抜いた罠」の数が増えた瞬間に弾む */
.hud-cell.bump .hud-v { animation: bump .4s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); color: var(--red-text); } 100% { transform: scale(1); } }
.hud-cell.right .hud-v { transform-origin: right bottom; }
.reaction.spot .r-trap { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .hud-cell.bump .hud-v { animation: none; } }
.nick-hint { text-wrap: balance; word-break: auto-phrase; }

/* ---- 周回2: 今日の挑戦／ランダムの切り替え、順位の2行、1文のコピー、磨き（ux） ---- */
.mode-box { margin: 14px auto 0; width: 100%; max-width: 360px; text-align: center; }
.mode-seg { display: flex; border: var(--line) solid var(--ink); }
.mode-opt { flex: 1; min-height: 44px; padding: 0 8px; background: var(--paper); border: 0; border-radius: 0; font-weight: 900; font-size: 16px; white-space: nowrap; }
.mode-opt + .mode-opt { border-left: var(--line) solid var(--ink); }
.mode-opt[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.mode-opt:not([aria-checked="true"]) { font-weight: 800; color: var(--ink-soft); }
.mode-note { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.45; min-height: 38px; text-wrap: balance; word-break: auto-phrase; }
@media (min-width: 700px) { .mode-opt:not([aria-checked="true"]):hover { background: var(--paper-2); } }
/* 開始の画面の空白: 背の高い画面では輪を少し大きくして、切り替えと開始のあいだを詰める */
@media (max-width: 699px) and (min-height: 760px) { #screen-start .ring-slot { width: min(340px, 86vw); margin-top: 26px; } }
@media (max-height: 700px) { .mode-box { margin-top: 8px; } .mode-note { min-height: 0; } }

/* 結果の順位: 区分ごとに1行。単語の途中で折り返さない */
.rank-text { display: flex; flex-direction: column; gap: 1px; }
.rank-text .rk { display: block; white-space: nowrap; font-size: 20px; line-height: 1.3; }
.rank-text.sk { display: block; }
.rank-text .why, .rank-text b { display: block; white-space: normal; }
.rank-why { text-wrap: balance; word-break: auto-phrase; }
/* 1文のコピー */
.share { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.copy-status { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink-soft); min-height: 21px; flex: 1 1 0; min-width: 0; }
.copy-status.on { color: var(--ink); }
.copy-text { flex: 1 0 100%; width: 100%; border: var(--line) solid var(--ink); border-radius: 0; background: #F7F0DF; padding: 8px 10px; font-size: 15px; font-weight: 700; line-height: 1.5; resize: none; -webkit-user-select: text; user-select: text; }
.nick-slot { margin-bottom: 130px; }
/* 順位表の補足と、今日の挑戦の印 */
.board-note { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.r-tag { flex: none; font-style: normal; font-size: 10px; font-weight: 900; border: 2px solid var(--ink); padding: 0 4px; line-height: 1.3; }
/* 「見抜いた罠」の数字は、拡大しても見出しの字に重ならないよう、下へ広がる */
.hud-cell.right .hud-v { transform-origin: right top; }
.hud-cell.right .hud-k { position: relative; z-index: 1; background: var(--paper); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); color: var(--red-text); } 100% { transform: scale(1); } }
.copy-text, .copy-status { word-break: auto-phrase; text-wrap: pretty; }
/* PC の低い窓（高さ 860 以下）: 開始の画面の輪を小さくして、「順位表」まで1画面に収める */
@media (min-width: 700px) and (max-height: 860px) { #screen-start .ring-slot { width: 244px; margin-top: 12px; } #screen-start .ring-num { font-size: 76px; min-height: 76px; } .mode-box { margin-top: 10px; } }