/* ナイスタちゃんのキャバ打
   色・フォントは よいどれキャッチ / ゾンビナイト と揃える（濃い夜色 + ネオンピンク） */
:root {
  --bg: #0b0a10;
  --panel: #17131f;
  --panel2: #221b2e;
  --line: #3a2f4a;
  --pink: #ff2d6f;
  --pink-soft: #ffd1e0;
  --cyan: #3ad6ff;
  --yellow: #ffd23f;
  --green: #4be08a;
  --text: #ffffff;
  --dim: #a49cb3;
  --font: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-title: "Dela Gothic One", var(--font);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* スクロールはブラウザのものを使う（枠の中でスクロールさせると、PC でスクロールバーが画面のまん中に出て邪魔なため）。
   ゲーム中だけはページを固定する（html.playing） */
html.playing, html.playing body { height: 100%; overflow: hidden; }
html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 45, 111, .22), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(58, 214, 255, .12), transparent 60%),
    var(--bg);
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- 画面切り替え ---------- */
.screen {
  position: relative;
  display: none;
  flex-direction: column;
  min-height: 100dvh;
}
.screen.active { display: flex; }
/* ゲーム画面は画面いっぱいに固定（スクロールしない） */
#screen-play { position: fixed; inset: 0; height: 100dvh; min-height: 0; }
.box {
  width: 100%; max-width: 440px;
  margin: 0 auto;
  padding: 28px 18px calc(28px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}

.brand { font-family: var(--font-title); font-size: 13px; letter-spacing: .25em; color: var(--dim); }
.brand b { color: var(--pink); font-weight: 400; }
.title { font-family: var(--font-title); font-weight: 400; line-height: 1.15; }
.title small { display: block; font-size: 16px; color: var(--pink-soft); }
.title span {
  display: block; font-size: 40px;
  background: linear-gradient(180deg, #fff 20%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 45, 111, .55));
}
.title em { display: block; margin-top: 6px; font-family: var(--font); font-style: normal; font-weight: 900; font-size: 13px; letter-spacing: .12em; color: var(--pink-soft); }
.title-chara { width: 168px; height: auto; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(255, 45, 111, .35)); }

/* ナイスタちゃんのセリフ（あそびかた・リザルト） */
.talk { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.talk img { flex: 0 0 auto; width: 84px; height: auto; }
.bubble {
  position: relative; flex: 1; padding: 10px 14px; border-radius: 16px;
  background: #fff; color: #3a2456; font-size: 14px; line-height: 1.6; font-weight: 900;
}
.bubble::before {
  content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px;
  border: 8px solid transparent; border-left: 0; border-right-color: #fff;
}
.bubble:empty { display: none; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-6deg); } }
.lead { font-size: 15px; line-height: 1.7; color: var(--pink-soft); }
.lead b { color: #fff; }
.h2 { font-family: var(--font-title); font-weight: 400; font-size: 26px; color: var(--pink); }
.h3 { font-size: 13px; color: var(--dim); margin-top: 4px; }

/* ---------- ボタン ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; padding: 10px 16px;
  border-radius: 999px; font-size: 16px; font-weight: 900;
  transition: transform .08s;
}
.btn:active { transform: scale(.97); }
.btn-main { background: linear-gradient(180deg, #ff5a8d, var(--pink)); box-shadow: 0 6px 20px rgba(255, 45, 111, .45); }
.btn-sub { background: var(--panel2); border: 1px solid var(--line); font-size: 14px; }
.btn-ghost { border: 2px solid var(--line); color: var(--pink-soft); }
.row2, .row3 { display: flex; gap: 10px; width: 100%; }
.row2 > *, .row3 > * { flex: 1; }
.row3 .btn { min-height: 44px; padding: 8px 6px; }
.btn[hidden] { display: none; }
.btn-line { background: #06c755; border-color: #06c755; color: #fff; }
.btn-share-img { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff; box-shadow: 0 6px 18px rgba(238, 42, 123, .4); }
.btn-share-img:disabled { opacity: .6; }

/* 結果画像の表示（共有メニューが使えない端末用） */
.img-modal { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .85); display: grid; place-items: center; padding: 16px; }
.img-modal[hidden] { display: none; }
.img-modal-box { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; color: var(--dim); }
.qr-cap { font-family: var(--font-title); font-size: 20px; line-height: 1.4; color: #fff; }
.qr-box { padding: 12px; border-radius: 14px; background: #fff; line-height: 0; }
.qr-box img { width: 240px; height: 240px; image-rendering: pixelated; border-radius: 0; }
.img-modal-box img { width: 100%; max-height: 66dvh; object-fit: contain; border-radius: 12px; user-select: auto; -webkit-user-select: auto; -webkit-touch-callout: default; }

/* ---------- タイトル: ユーザー / コース ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: flex-end; padding: 10px 12px;
}
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.user-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cyan); }
.user-chip .login { padding: 6px 14px; border-radius: 999px; background: #3a2456; border: 1px solid var(--line); }
.user-chip .reg { padding: 6px 12px; border-radius: 999px; background: var(--pink); }

.courses { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.course {
  display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left;
  padding: 12px 16px; border-radius: 16px;
  background: var(--panel); border: 2px solid var(--line);
  transition: transform .08s, border-color .15s;
}
.course:active { transform: scale(.98); border-color: var(--pink); }
.course .nm { font-family: var(--font-title); font-weight: 400; font-size: 20px; }
.course .pr { font-size: 13px; color: var(--yellow); }
.course .ds { grid-column: 1 / -1; font-size: 12px; color: var(--dim); font-weight: 500; margin-top: 2px; }
.course .bs { font-size: 12px; color: var(--cyan); text-align: right; }
/* 今日のお題（1 日 1 回） */
.course.daily { border-color: var(--yellow); background: linear-gradient(135deg, #2a2210, var(--panel) 60%); }
.course.daily .nm { color: var(--yellow); font-size: 18px; }
.course.daily.done { opacity: .6; border-color: var(--line); cursor: default; }
.course.daily.done .pr { color: var(--dim); }
/* 挑戦状と同じコース */
.course.vs { border-color: var(--pink); box-shadow: 0 0 14px rgba(255, 45, 111, .45); }
.vs-banner {
  width: 100%; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, #3a1530, #1d1426); border: 2px solid var(--pink);
  display: flex; flex-direction: column; gap: 8px;
}
.vs-banner[hidden] { display: none; }
.vs-banner .vs-cap { font-family: var(--font-title); font-size: 17px; color: var(--pink-soft); }
.vs-banner .vs-score { font-size: 14px; color: #fff; }
.vs-banner .btn { min-height: 42px; font-size: 15px; }
.course[data-id="easy"] .nm { color: #7ee0ff; }
.course[data-id="std"] .nm { color: var(--pink-soft); }
.course[data-id="high"] .nm { color: var(--yellow); }

/* ---------- あそびかた ---------- */
.how { list-style: none; display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.how li { display: flex; gap: 12px; align-items: center; background: var(--panel); border-radius: 14px; padding: 10px 12px; }
.how .ic {
  flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--panel2);
  display: grid; place-items: center; font-size: 22px; color: var(--pink);
}
.how .txt { font-size: 13px; line-height: 1.6; font-weight: 500; }
.how b { color: var(--pink-soft); }

/* ---------- ゲーム画面 ---------- */
#screen-play { padding-top: env(safe-area-inset-top, 0px); }
.hud { display: flex; align-items: center; gap: 12px; padding: 10px 56px 6px 52px; }
.hud-time { flex: 1; display: flex; align-items: center; gap: 8px; }
.time-track { flex: 1; height: 10px; border-radius: 99px; background: var(--panel2); overflow: hidden; }
.time-bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), #9cf0ff); border-radius: 99px; transition: background .3s; }
.time-bar.low { background: linear-gradient(90deg, var(--pink), #ff8fb2); }
.time-num { font-family: var(--font-title); font-size: 18px; min-width: 2.2em; text-align: right; }
.hud-money { font-family: var(--font-title); font-size: 22px; white-space: nowrap; }
.hud-money small { font-size: 12px; margin-left: 2px; }
.hud-money em { font-style: normal; font-family: var(--font); font-size: 11px; color: var(--dim); margin-left: 4px; }
.hud-money.over { color: var(--yellow); }

.mute, .quit {
  position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel2); border: 1px solid var(--line); font-size: 15px;
}
.quit { left: 10px; color: var(--dim); }
.mute { right: 10px; }
.mute.off { opacity: .4; text-decoration: line-through; }

/* まん中のエリア（レーン + 問題文の枠）。レーンは空いている高さいっぱいに広げ、
   問題文の枠は寿司打のようにレーンの下側に半透明で重ねる */
.stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; padding-bottom: 10px;
}
.counter { position: relative; flex: 0 0 auto; padding-top: 30px; } /* 上の余白はナイスタちゃんのふきだし用 */

/* レーン。ベルト（回転寿司のような明るいグレー）は細いまま、グラスだけ大きくしてベルトの上に立たせる */
.lane {
  --pw: 104px; /* グラス 1 個の幅。game.js の sizeLane() が空いている高さに合わせて決める */
  position: relative; height: calc(var(--pw) + 24px);
  /* 左右ははみ出したグラスを隠す。上はナイスタちゃんのふきだしが出られるようにあけておく */
  clip-path: inset(-60px 0 0 0);
}
.belt {
  /* 下の 16px は問題文の枠が重なる */
  position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
  background: linear-gradient(180deg, #e6e9ee 0%, #c9ced6 55%, #aab1bb 100%);
  border-top: 4px solid #8d95a1; border-bottom: 6px solid #6c7480;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
  overflow: hidden;
}
/* 流れるしま模様は transform で動かす（背景位置を動かすと毎フレーム描き直しになり、古い機種でタッチの反応が落ちる） */
.belt::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 48px);
  background: repeating-linear-gradient(90deg, rgba(60, 66, 76, .22) 0 2px, transparent 2px 48px);
  will-change: transform;
  animation: belt 1.4s linear infinite;
}
@keyframes belt { to { transform: translateX(-48px); } }
.plate {
  position: absolute; bottom: 18px; left: 0; z-index: 2; width: var(--pw); height: var(--pw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  will-change: transform;
}
.plate::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 12%; height: 18%;
  border-radius: 50%; background: var(--pc, #6bb7ff); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), 0 2px 0 rgba(0, 0, 0, .25);
}
.plate .neta { position: relative; font-size: calc(var(--pw) * .66); line-height: 1; margin-bottom: 14%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.plate .yen {
  position: absolute; bottom: -2px; padding: 1px 8px; border-radius: 99px;
  background: rgba(23, 19, 31, .85); color: #fff; font-size: max(12px, calc(var(--pw) * .1));
}
.plate.active::before { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), 0 0 0 3px #fff, 0 0 16px 4px var(--pink); }
.plate.active .yen { background: var(--pink); }
/* レーンに置かれる動き（上から少し落ちて、トンと着地）。横の位置は JS の transform なので translate で動かす */
.plate.placed { animation: place .32s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes place {
  from { translate: 0 calc(var(--pw) * -.25); opacity: 0; }
  60% { opacity: 1; }
}
.plate.eaten { animation: eat .35s ease-in forwards; }
@keyframes eat { to { transform: var(--tf) translateY(-40px) scale(.3); opacity: 0; } }
.plate.lost { opacity: .35; filter: grayscale(1); }

/* 問題文の枠（寿司打風の半透明の黒い四角）。レーンの下端に少しだけ重ねる。
   レーンと合わせて .stage の上下まん中に置くので、枠は画面の中心付近に来る。
   上の余白はトースト（ミスなし連続など）用で、文字には重ならない */
.board {
  flex: 0 0 auto; position: relative; z-index: 4;
  margin: -16px 12px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 22px 14px 12px; text-align: center;
  background: rgba(6, 5, 10, .74);
  border: 2px solid rgba(255, 255, 255, .22); border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.word { font-size: clamp(24px, 7.4vw, 36px); font-weight: 900; line-height: 1.25; min-height: 1.25em; word-break: keep-all; overflow-wrap: anywhere; }
.reading { font-size: clamp(22px, 6.6vw, 30px); font-weight: 900; letter-spacing: .06em; color: var(--dim); min-height: 1.4em; }
.reading .done { color: #ff3b3b; } /* 打った文字は赤（ユーザー指定） */
/* 次に打つ文字は色を変えず、下線だけ（ユーザー指定）。色が変わるのは打ち終わった文字だけ */
.reading .pend { border-bottom: 3px solid var(--yellow); }
.reading .next { border-bottom: 3px solid rgba(255, 255, 255, .5); }
/* PC キーボード: ローマ字の見本。フリックのときは出さない */
.roma { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: clamp(18px, 4.6vw, 26px); letter-spacing: .04em; color: var(--dim); min-height: 1.3em; }
.roma .done { color: #ff3b3b; }
body:not(.mode-kb) .roma { display: none; }
body.mode-kb .kb { display: none; }
body.mode-kb .word { font-size: clamp(28px, 5vw, 44px); }
.mode-note { font-size: 12px; color: var(--dim); margin-top: -4px; }
.sens { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--dim); }
.sens[hidden] { display: none; }
.sens span { flex: 0 0 auto; }
.board.miss { animation: shake .22s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.toast {
  position: absolute; top: 3px; left: 0; right: 0;
  font-size: 14px; font-weight: 900; color: var(--yellow);
  opacity: 0; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* ゲーム中のナイスタちゃん（レーンの右端でグラスを出す係。ふきだしはレーンの上に出す） */
/* レーンの左端（グラスが流れていく先）。足元はグラスと同じ高さ。グラスより手前に出す（ユーザー指定） */
.nst { position: absolute; left: 2px; bottom: 18px; z-index: 3; pointer-events: none; }
.nst img { display: block; width: max(70px, calc(var(--pw) * .48)); height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.nst.hop img { animation: hop .4s ease-out; }
.nst.sad img { animation: shake .3s; filter: saturate(.5) drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
@keyframes hop { 40% { transform: translateY(-10px) scale(1.06); } }
.nst-say {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 2px; padding: 5px 10px; border-radius: 12px;
  background: #fff; color: #3a2456; font-size: 12px; font-weight: 900; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
}
.nst-say::before {
  content: ""; position: absolute; left: 24px; bottom: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: #fff;
}
.nst-say.show { opacity: 1; transform: none; }

/* 画面が低い端末（iPhone SE など）は少し小さくして、お題が隠れないようにする */
@media (max-height: 700px) {
  .counter { padding-top: 26px; }
  .belt { height: 72px; }
  .board { padding: 20px 12px 8px; }
}

/* フリックキーボード（スマホ標準の 3×4 配列）
   キーに厚みを付けて行の間をあけ、立体的に見せる（シメジの着せ替えを参考）。押すと沈む */
/* 大きさ・位置は iPhone 標準のかなキーボードに合わせる（2026-10-09 ユーザー指定。大きすぎて打ちづらかった）
   左右の列に iPhone と同じ機能キー（→ ☆123 ABC 🌐 / ⌫ 空白 改行）を置き、かなキーはまん中の 3 列。
   iPhone より縦横ほんの少しだけ大きめ（ユーザー指定）。背景は透かしてボタンだけが目立つように */
.kb {
  flex: 0 0 auto;
  display: grid; grid-template-columns: .66fr repeat(3, 1fr) .66fr; gap: 8px 6px;
  padding: 6px 4px calc(10px + var(--safe-b));
  background: none;
  touch-action: none;
  max-width: 520px; width: 100%; margin: 0 auto;
}
.key {
  --top: linear-gradient(180deg, #4a4058, #352d42);
  --side: #16121d;
  position: relative;
  height: 47px;
  border-radius: 9px; background: var(--top);
  box-shadow: 0 4px 0 var(--side), 0 6px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
  font-size: 21px; font-weight: 900;
  display: grid; place-items: center;
  touch-action: none;
}
.key .m { line-height: 1; }
/* 上下左右に小さく出すフリック先の文字 */
.key .s { position: absolute; font-size: 9px; line-height: 1; color: rgba(255, 255, 255, .38); }
.key .s.l { left: 5px; top: 50%; margin-top: -4.5px; }
.key .s.r { right: 5px; top: 50%; margin-top: -4.5px; }
.key .s.u { top: 2px; left: 50%; transform: translateX(-50%); }
.key .s.d { bottom: 2px; left: 50%; transform: translateX(-50%); }
.key.mod, .key.dash { --top: linear-gradient(180deg, #4d3070, #3a2456); --side: #1f1230; }
.key.mod { font-size: 15px; }
/* 左右の機能キー（iPhone と同じく、かなキーより暗いグレー） */
.key.fn { --top: linear-gradient(180deg, #2b2733, #211d28); --side: #0b0910; color: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 700; }
.key.tall { height: auto; } /* 「改行」は 2 行ぶんの高さ */
.key.press {
  --top: linear-gradient(180deg, #ff5a8d, var(--pink)); --side: #8e0f37;
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--side), 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.key.press .s { color: rgba(255, 255, 255, .7); }

/* フリック中に出るガイド（指の周りに5方向の候補） */
.flick-guide {
  position: fixed; z-index: 30; pointer-events: none; display: none;
  width: 0; height: 0;
}
.flick-guide.show { display: block; }
.flick-guide span {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 900; border-radius: 12px;
  background: rgba(34, 27, 46, .95); border: 1px solid var(--line); color: var(--dim);
}
.flick-guide span:empty { display: none; }
.flick-guide span.c { left: 0; top: 0; }
.flick-guide span.l { left: -54px; top: 0; }
.flick-guide span.u { left: 0; top: -54px; }
.flick-guide span.r { left: 54px; top: 0; }
.flick-guide span.d { left: 0; top: 54px; }
.flick-guide span.sel { background: var(--pink); color: #fff; border-color: #fff; transform: scale(1.12); }

.countdown {
  position: absolute; inset: 0; z-index: 20; display: none;
  place-items: center; background: rgba(11, 10, 16, .6);
  font-family: var(--font-title); font-size: 96px; color: var(--pink);
  text-shadow: 0 0 30px rgba(255, 45, 111, .7);
}
.countdown.show { display: grid; }
.countdown .msg { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 20px; text-align: center; }
.countdown .msg b { font-weight: 400; font-size: clamp(22px, 6.4vw, 34px); word-break: keep-all; } /* 「（フリック）」が途中で折れないように */
.countdown .msg img { width: 120px; height: auto; }
.countdown.finish .msg img { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.countdown .msg span { font-family: var(--font); font-weight: 900; font-size: 18px; color: #fff; text-shadow: none; }
.countdown .msg small { font-family: var(--font); font-size: 12px; color: var(--dim); text-shadow: none; }
.countdown.ready { background: rgba(11, 10, 16, .82); cursor: pointer; }
.countdown.ready .msg span { animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.countdown .back {
  margin-top: 14px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line); font-family: var(--font); font-size: 13px; color: var(--pink-soft); text-shadow: none;
}
.countdown.finish { background: rgba(11, 10, 16, .88); }
.countdown.finish .msg b { font-size: clamp(40px, 13vw, 64px); color: var(--yellow); text-shadow: 0 0 30px rgba(255, 210, 63, .6); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* ---------- リザルト ---------- */
.result-cap { font-family: var(--font-title); font-size: 15px; color: var(--pink-soft); letter-spacing: .1em; }
.result-money { font-family: var(--font-title); }
.result-money span { font-size: 54px; color: var(--yellow); text-shadow: 0 0 20px rgba(255, 210, 63, .5); }
.result-money small { display: block; font-size: 16px; }
/* 称号 */
.result-rank { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pink-soft); }
.result-rank b {
  padding: 4px 16px; border-radius: 999px; background: var(--pink); color: #fff;
  font-family: var(--font-title); font-weight: 400; font-size: 20px; letter-spacing: .04em;
  box-shadow: 0 0 16px rgba(255, 45, 111, .5);
}
.result-vs { font-size: 15px; font-weight: 900; }
.result-vs:empty { display: none; }
.result-vs.win { color: var(--yellow); }
.result-vs.lose { color: var(--dim); }
.result-diff { font-size: 20px; font-weight: 900; }
.result-diff.plus { color: var(--green); }
.result-diff.minus { color: var(--pink); }
.stats { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 14px; overflow: hidden; font-size: 14px; }
.stats th, .stats td { padding: 8px 14px; border-bottom: 1px solid var(--line); }
.stats tr:last-child th, .stats tr:last-child td { border-bottom: 0; }
.stats th { text-align: left; color: var(--dim); font-weight: 700; }
.stats td { text-align: right; }
.result-best { font-size: 13px; color: var(--cyan); min-height: 1em; }
.rank-chip {
  width: 100%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6;
  background: var(--panel2); border: 1px solid var(--line);
}
.rank-chip:empty { display: none; }
.rank-chip b { color: var(--yellow); font-size: 16px; }
.rank-chip .links { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.rank-chip .links a { padding: 6px 14px; border-radius: 999px; background: #3a2456; font-size: 13px; }
.rank-chip .links a.reg { background: var(--pink); }

/* ---------- ランキング ---------- */
.tabs { display: flex; width: 100%; background: var(--panel); border-radius: 999px; padding: 4px; gap: 4px; }
.tabs button { flex: 1; padding: 9px 4px; border-radius: 999px; font-size: 14px; color: var(--dim); }
.tabs button.on { background: var(--pink); color: #fff; }
.tabs.small button { padding: 6px 4px; font-size: 13px; }
.tabs.small button.on { background: #3a2456; }
.rk-label { font-size: 12px; color: var(--dim); }
.rk-me { width: 100%; font-size: 13px; line-height: 1.6; }
.rk-me:empty { display: none; }
.rk-me .box2 { padding: 10px 14px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--cyan); }
.rk-me .box2.guest { border-color: var(--pink); }
.rk-me .links { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.rk-me .links a { padding: 6px 14px; border-radius: 999px; background: #3a2456; }
.rk-me .links a.reg { background: var(--pink); }
.rk-list { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.rk-list li {
  display: grid; grid-template-columns: 34px 34px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--panel); border-radius: 12px; text-align: left; font-size: 14px;
}
.rk-list li.me { border: 1px solid var(--cyan); }
.rk-list .no { font-family: var(--font-title); font-size: 16px; color: var(--dim); text-align: center; }
.rk-list li:nth-child(1) .no { color: var(--yellow); }
.rk-list li:nth-child(2) .no { color: #d7dde8; }
.rk-list li:nth-child(3) .no { color: #e3a46b; }
.rk-list img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--panel2); }
.rk-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-list .sc { font-family: var(--font-title); color: var(--yellow); }
.rk-list .empty { display: block; text-align: center; color: var(--dim); padding: 24px 12px; }