@font-face { font-family: "PinfuRounded"; font-weight: 400; font-display: swap; src: url("fonts/mplus-rounded-regular.woff2") format("woff2"); }
@font-face { font-family: "PinfuRounded"; font-weight: 700; font-display: swap; src: url("fonts/mplus-rounded-bold.woff2") format("woff2"); }
@font-face { font-family: "PinfuRounded"; font-weight: 800; font-display: swap; src: url("fonts/mplus-rounded-extrabold.woff2") format("woff2"); }
/* 配色は仕様書8章・Android の ui/Theme.kt と同じ（明るい配色だけ） */
:root {
  color-scheme: light;
  --bg: #f3f6f1;
  --home-bg: #f8f7f3;
  --card: #ffffff;
  --text: #1d2420;
  --muted: #5c6862;
  --line: #dce3dd;
  --accent: #1e6b47;
  --accent-2: #1e6b47;
  --accent-soft: #ddefe4;
  --felt: #1e6b47;
  --bar: var(--felt);
  --ok: #1f9d55;
  --ok-soft: #e3f5ea;
  --ng: #d64545;
  --ng-soft: #fbe7e7;
  --miss: #e59a1a;
  --miss-soft: #fdf1d3;
  --select: #2f6fe0;
  --learn: #34a86b; --learn-hi: #7fd3a2;
  --practice: #e85d57; --practice-hi: #f79a8c;
  --exam: #3b82d9; --exam-hi: #8cc2f2;
  --record: #8b5cf6;
  --review: #f08c1a;
  --yellow: #ffc93c;
  --blob-blue: #bde7e4;
  --blob-yellow: #fbe3a6;
  --gold: #f2e6b8;
  --tile-face: #fbf8ee;
  --tile-edge: #cfc6ae;
  --tile-side: #e6dfcc;
  --tile-back: #1f5fc4;
  --tile-back-hi: #4a86e8;
  --tw: min(calc((min(100vw, 720px) - 56px) / 14.6), 46px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "PinfuRounded", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.6;
}
#app { max-width: 720px; margin: 0 auto; min-height: 100vh; }

/* ヘッダー */
.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--bar); color: #fff;
}
.bar h1 { font-size: 19px; font-weight: 800; margin: 0; flex: 1; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .back { color: #fff; display: flex; padding: 6px; margin-right: 2px; }
.bar .back svg { width: 24px; height: 24px; }
.bar .stat { font-size: 13px; opacity: .9; white-space: nowrap; }

.levels { display: flex; gap: 6px; padding: 10px 16px 0; }
.levels button {
  flex: 1; padding: 8px 0; border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 999px; font-size: 14px; cursor: pointer;
}
.levels button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

.page { padding: 12px 16px 40px; }
h2 { font-size: 15px; color: var(--accent); margin: 18px 0 8px; }
.box h2 { margin-top: 0; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 10px 0; }
.small, small { font-size: 12.5px; color: var(--muted); }
.note { font-size: 12.5px; color: var(--muted); margin-top: 20px; }
ul, ol { padding-left: 1.3em; margin: 6px 0; }
li { margin: 3px 0; }

/* ホームのカード */
.card {
  display: flex; align-items: center; gap: 14px; padding: 14px; margin: 8px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); text-decoration: none;
}
.card:active { transform: scale(.99); }
.card .ic { width: 40px; display: flex; justify-content: center; font-size: 26px; flex-shrink: 0; }
.card b { display: block; font-size: 16px; }
.card small { display: block; }

/* 牌 */
.tile {
  --w: var(--tw);
  --d: calc(var(--w) * .07);
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--w); height: calc(var(--w) * 1.333); margin: 0 1px calc(var(--w) * .17) 0; padding: 0;
  background: linear-gradient(180deg, #fffefa 0%, #f7f3e8 55%, #ebe5d4 100%);
  border: 1px solid #cfc6af; border-radius: calc(var(--w) * .12);
  /* 白い胴 → 背の色 → 影 の順に重ねて、牌の厚みを出す */
  box-shadow: inset 0 1px 0 #fff, 0 var(--d) 0 #e6dfcc, 0 calc(var(--d) * 2) 0 var(--tile-back), 0 calc(var(--d) * 2.4) calc(var(--d) * 1.6) rgba(0, 0, 0, .35);
  vertical-align: middle; user-select: none; line-height: 0;
}
.tile img { width: 94%; height: auto; display: block; pointer-events: none; -webkit-user-drag: none; }
.tile.sm { --w: 24px; }
.tile.xs { --w: 18px; }
.card .tile.sm { --w: 30px; }
button.tile { cursor: pointer; transition: transform .08s; }
button.tile:active { transform: translateY(2px); }
button.tile:disabled { cursor: default; }
/* 押せる牌は、見た目より少し広い範囲で押せるようにする（小さい牌で押し損ねないように） */
button.tile { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button.tile.pick::after { content: ''; position: absolute; left: -1.5px; right: -1.5px; top: -6px; bottom: -10px; }

.hand { display: flex; flex-wrap: nowrap; align-items: flex-end; margin: 12px 0; overflow-x: auto; padding-bottom: 4px; }
.hand.mini { --tw: min(calc((100vw - 72px) / 14.6), 30px); margin: 6px 0; }
.win-gap { width: calc(var(--tw) * .45); flex-shrink: 0; }
.hand { overflow-y: hidden; }
.hand:has(.win) { padding-bottom: 24px; }
.win { position: relative; display: inline-flex; }
.win small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; margin-top: 4px; white-space: nowrap; }
.group { display: inline-flex; margin-right: 6px; }

/* 牌の面は明るいままにして、色付きの枠と薄い色で示す */
.hand .pick.ok, .prow .pick.ok { background: #d9f3e2; outline: 3px solid var(--ok); outline-offset: -1px; }
.hand .pick.ng, .prow .pick.ng { background: #fbdcd9; outline: 3px solid var(--ng); outline-offset: -1px; }

/* 条件 */
.q { font-weight: 700; margin: 8px 0; }
.conds { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); display: inline-flex; align-items: center; gap: 4px; }
.hint { font-size: 14px; color: var(--accent); font-weight: 700; margin: 6px 0; }

/* ボタン */
.primary {
  display: block; width: 100%; padding: 13px; margin: 14px 0 0; border: none; border-radius: 12px;
  background: var(--accent-2); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ybtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.yb {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text);
  font-size: 14px; cursor: pointer;
}
.yb.on { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.yb.ok { background: var(--ok-soft); border-color: var(--ok); }
.yb.ng { background: var(--ng-soft); border-color: var(--ng); }
.yb.miss { background: var(--miss-soft); border-color: var(--miss); border-style: dashed; }
/* 採点の色に ○△× の記号も付ける（色だけに頼らない） */
.yb.ok::before, .choice.ok::before { content: '○ '; color: var(--ok); font-weight: 800; }
.yb.ng::before, .choice.ng::before { content: '× '; color: var(--ng); font-weight: 800; }
.yb.miss::before { content: '△ '; color: var(--miss); font-weight: 800; }
.pick.ok::before, .pick.ng::before, .pick.miss::before { position: absolute; top: -7px; right: -5px; z-index: 1; width: 15px; height: 15px; border-radius: 50%;
  font-size: 11px; line-height: 15px; font-weight: 800; text-align: center; color: #fff; }
.pick.ok::before { content: '○'; background: var(--ok); }
.pick.ng::before { content: '×'; background: var(--ng); }
.pick.miss::before { content: '△'; background: var(--miss); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.choice {
  padding: 14px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text);
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.choice.ok { background: var(--ok-soft); border-color: var(--ok); }
.choice.ng { background: var(--ng-soft); border-color: var(--ng); }

.picker { margin: 10px 0; }
.prow { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.prow .tile { --w: min(calc((100vw - 60px) / 9), 40px); }
.prow .pick.on { outline: 3px solid var(--accent); outline-offset: -1px; background: #e3f1e8; transform: translateY(-3px); }
.prow .pick.miss { outline: 3px dashed var(--miss); outline-offset: -1px; background: #fdf1d3; }
.prow .pick.dim { opacity: .35; }

/* 解説 */
.feedback { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--card); border: 2px solid var(--line); }
.feedback.good { border-color: var(--ok); }
.feedback.bad { border-color: var(--ng); }
.feedback h3 { margin: 0 0 8px; font-size: 18px; }
.feedback.good h3 { color: var(--ok); }
.feedback.bad h3 { color: var(--ng); }
.ylist { list-style: none; padding: 0; margin: 6px 0; }
.ylist li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.total { font-size: 15px; margin: 8px 0; }
.total b { font-size: 20px; color: var(--accent); }
.fu summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.wlist { list-style: none; padding: 0; }
.wlist li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.wname { font-size: 13px; font-weight: 700; color: var(--accent); }
.legend { display: flex; gap: 10px; flex-wrap: wrap; }
.lg::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.lg.ok::before { background: var(--ok-soft); border: 2px solid var(--ok); }
.lg.miss::before { background: var(--miss-soft); border: 2px dashed var(--miss); }
.lg.ng::before { background: var(--ng-soft); border: 2px solid var(--ng); }

/* 表 */
.scroll { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 5px 6px; text-align: center; vertical-align: middle; }
.tbl th { background: var(--accent-soft); font-weight: 700; }
.tbl.pts td { font-weight: 700; white-space: nowrap; }
.tbl.pts td small { display: block; font-weight: 400; }
.tbl.pts td.mg { background: var(--miss-soft); }
.tbl.nani tr.best { background: var(--ok-soft); }
.tbl.nani tr.mine td:first-child { outline: 3px solid var(--accent); outline-offset: -3px; }
.tbl.nani th, .tbl.nani td { white-space: nowrap; padding: 4px; font-size: 13px; }
.tbl.nani td small { display: block; }
.tbl.nani td.ukt { white-space: normal; }
.tbl.nani .ukt { text-align: left; }
.tbl.nani .ukt .tile { margin-bottom: 2px; }

/* 役一覧 */
.yaku .yh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.yaku .yh b { font-size: 17px; }
.yaku .read { font-size: 12px; color: var(--muted); }
.yaku .han { margin-left: auto; font-weight: 700; color: var(--accent); }
.yaku .tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); }
.yaku p { margin: 6px 0; font-size: 14px; }

/* ---------- 鳴き・赤・伏せ牌 ---------- */
.meld { display: inline-flex; align-items: flex-end; margin-left: 4px; flex-shrink: 0; }
.tile.yoko { transform: rotate(-90deg); margin: 0 calc(var(--w) * .2) 0; box-shadow: inset 0 1px 0 #fff, calc(var(--d) * -1) 0 0 #e6dfcc, calc(var(--d) * -2) 0 0 var(--tile-back), calc(var(--d) * -2.4) 0 calc(var(--d) * 1.6) rgba(0, 0, 0, .35); }
.tile.back { background: linear-gradient(180deg, var(--tile-back-hi), var(--tile-back)); border-color: var(--tile-back); }

/* ---------- ホーム・設定 ---------- */
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.opt small { display: block; }
.opt input[type=radio] { margin-top: 5px; accent-color: var(--accent-2); }
.num-opt { align-items: center; }
.num-opt input { width: 80px; }
.danger { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--ng); background: var(--card); color: var(--ng); font-weight: 700; cursor: pointer; }

/* ---------- 入力 ---------- */
input.num, .num-opt input {
  width: 6.2em; padding: 8px 8px; font-size: 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); text-align: right; font-variant-numeric: tabular-nums;
}
input.num:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
input.num.ok { border-color: var(--ok); background: var(--ok-soft); }
input.num.ng { border-color: var(--ng); background: var(--ng-soft); }
.unit { margin: 0 4px; font-size: 14px; color: var(--muted); }
.correct { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--ng); }
.quad { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.quad label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.quad label > span:first-child { width: 7.5em; font-weight: 700; font-size: 14px; }
.quad .ans { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
@media (min-width: 560px) { .quad { grid-template-columns: 1fr 1fr; } .quad.one { grid-template-columns: 1fr; } }
.tbl.cond { width: auto; min-width: 60%; }
.tbl.cond th { text-align: left; }
.tbl.cond td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tbl.cond tr.me th, .tbl.cond tr.me td { background: var(--miss-soft); }
.tbl.qx td.l { text-align: left; font-size: 12px; }
.clist { padding-left: 1.1em; }
.clist li { margin: 8px 0; }

/* ---------- 時間 ---------- */
.timerline { display: flex; justify-content: space-between; align-items: center; min-height: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.timerline.sticky { position: sticky; top: 52px; z-index: 4; background: var(--bg); padding: 6px 0; }
/* 模擬試験の上の帯：残り時間と、前・次・未回答への移動 */
.exbar { position: sticky; top: 52px; z-index: 4; background: var(--bg); padding: 6px 0; }
.exnav { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.exnav button { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--felt); background: var(--card); color: var(--felt); font-weight: 800; font-size: 14px; white-space: nowrap; touch-action: manipulation; }
.exnav button:disabled { opacity: .4; }
.exnav-n { flex: 1; font-size: 13px; color: var(--muted); white-space: nowrap; }
#timer.hurry { color: var(--ng); }

/* ---------- 模擬試験 ---------- */
.exq { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 12px 0; background: var(--card); }
.exq.good { border-color: var(--ok); }
.exq.bad { border-color: var(--ng); }
.exn { font-weight: 700; color: var(--accent); }
.exfb summary { cursor: pointer; font-weight: 700; margin-top: 8px; }
.exq.good .exfb summary { color: var(--ok); }
.exq.bad .exfb summary { color: var(--ng); }
.q-item .hand .pick.on { outline: 3px solid var(--accent); outline-offset: -1px; background: #e3f1e8; transform: translateY(-4px); }
.q-item .hand .pick.miss { outline: 3px dashed var(--miss); outline-offset: -1px; background: #fdf1d3; }

/* 長い手（鳴きあり）は縮めずに折り返す */
.hand { flex-wrap: wrap; row-gap: 10px; overflow: visible; }
.hand .tile, .meld .tile { flex-shrink: 0; }
.exq { --tw: min(calc((min(100vw, 720px) - 86px) / 14.6), 44px); }

/* 牌の背：Mリーグの自動卓（AMOS REXX3 Mリーグモデル）の専用牌と同じ青とイエローの2セット。問題ごとに入れ替わる */
.back-blue { --tile-back: #1f5fc4; --tile-back-hi: #4a86e8; }
.back-orange { --tile-back: #f0a81c; --tile-back-hi: #f8c955; }

/* ---------- PINFU- の見た目（Android の HomeScreen.kt に合わせる） ---------- */
button, input, select { font-family: inherit; }
.page > .primary[data-act] {
  position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 4;
  box-shadow: 0 4px 14px rgba(30, 107, 71, .3);
}
.primary { border-radius: 16px; background: var(--felt); font-weight: 800; text-align: center; text-decoration: none; }
.bar .stat { margin-left: auto; }

.home { position: relative; min-height: 100vh; background: var(--home-bg); padding: 8px 16px 24px; padding-top: max(8px, env(safe-area-inset-top)); overflow: hidden; }
.blobs i { position: absolute; border-radius: 50%; z-index: 0; }
.blobs i:nth-child(1) { width: 56vw; height: 56vw; max-width: 400px; max-height: 400px; left: -36vw; top: -30vw; background: var(--blob-blue); }
.blobs i:nth-child(2) { width: 44vw; height: 44vw; max-width: 320px; max-height: 320px; right: -22vw; top: 62vw; background: var(--blob-yellow); }
.blobs i:nth-child(3) { width: 32vw; height: 32vw; left: -22vw; top: 92vw; background: var(--blob-yellow); }
.blobs i:nth-child(4) { width: 36vw; height: 36vw; right: -26vw; top: 128vw; background: var(--blob-blue); }
.home > *:not(.blobs) { position: relative; z-index: 1; }
.hero { position: relative; display: flex; align-items: center; padding-top: 40px; min-height: 170px; }
.hero .ttl { flex: 1; }
.logo { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; color: var(--text); display: inline-block;
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 2px 96% / calc(100% - 4px) 7px; padding-bottom: 6px; }
.tagline { margin: 8px 0 0; font-size: 13px; color: var(--muted); letter-spacing: .08em; }
.mascot { width: 150px; height: 150px; object-fit: contain; margin-right: -8px; }
.hero .gear { position: absolute; right: 0; top: max(0px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--text);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); z-index: 2; }
.gear svg { width: 24px; height: 24px; }

.pills { display: flex; gap: 8px; margin: 16px 0; }
.pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 10px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); color: var(--text); font-size: 13px; text-decoration: none; cursor: pointer; }
.pill svg { width: 18px; height: 18px; flex-shrink: 0; }
.pill span + svg { width: 16px; height: 16px; }
.pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 2026-11-08：ルールは「プロ団体ルール」まで見える幅を取り、時間は文字に合わせた幅にする（ユーザー指定） */
.pill[data-act=rule] { flex: 1 1 auto; }
.pill[data-act=time] { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }

.cats { display: flex; gap: 10px; }
.cat { --c: var(--learn); --hi: var(--learn-hi); position: relative; flex: 1; aspect-ratio: .6; border-radius: 22px; overflow: hidden;
  background: linear-gradient(var(--hi), var(--c)); border: 2px solid rgba(255, 255, 255, .6); box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; align-items: center; padding-top: 16px; color: #fff; text-decoration: none; }
.cat.practice { --c: var(--practice); --hi: var(--practice-hi); }
.cat.exam { --c: var(--exam); --hi: var(--exam-hi); }
.cat-ic svg { width: 40px; height: 40px; display: block; }
.cat-ic .ln { stroke: var(--c); }
.cat b { margin-top: 6px; font-size: clamp(16px, 5.4vw, 21px); font-weight: 800; white-space: nowrap; }
.cat small { color: rgba(255, 255, 255, .92); font-size: 12px; }
.cat .art { position: absolute; left: 0; right: 0; bottom: 4px; height: 66px; display: flex; justify-content: center; opacity: .6; }
.cat .art img { height: 100%; width: 100%; object-fit: contain; }
.sheet-art { display: block; height: 100%; aspect-ratio: 3 / 2; background: url("img/card_practice_sheet.webp") no-repeat 100% 100% / 200% 200%; }
.go { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--c, var(--felt)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.go svg { width: 18px; height: 18px; }
.cat .go { position: absolute; right: 8px; bottom: 8px; }

.rec-card { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px 16px; border-radius: 22px; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1); color: var(--text); text-decoration: none; }
.rc-ic { color: var(--record); display: flex; }
.rc-ic svg { width: 30px; height: 30px; }
.rc-t { flex: 1; }
.rc-t b { display: block; font-size: 16px; font-weight: 800; }
.rc-t small { font-size: 13px; }
.rec-card .go { background: var(--record); color: #fff; }

.shortcuts { display: flex; padding: 14px 4px; border-radius: 22px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.shortcuts a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px; color: var(--text); text-decoration: none; }
.shortcuts a + a { border-left: 1px solid var(--line); }
.shortcuts b { font-size: 11px; line-height: 14px; text-align: center; }
.sc-ic, .lc-mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.sc-ic img, .lc-mark img { width: 100%; height: 100%; object-fit: contain; }
.ltile { display: inline-flex; align-items: flex-start; justify-content: center; width: 28px; height: 37px; padding-top: 3px; border-radius: 4px;
  background: var(--tile-face); border: 1px solid var(--tile-edge); color: var(--lc); font-weight: 800; font-size: 18px; line-height: 1.3;
  box-shadow: 0 2px 0 var(--tile-side), 0 4px 0 var(--tile-back), 0 5px 4px rgba(0, 0, 0, .2); }
.wpair { display: flex; }
.wpair .tile { --w: 21px; }
.wpair .tile:first-child { transform: rotate(-8deg); margin-right: -3px; }
.wpair .tile:last-child { transform: rotate(8deg); }
.home .note a { color: var(--muted); }

/* カテゴリの一覧 */
.lcards { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.lcard { --c: var(--learn); display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08); color: var(--text); text-decoration: none; }
.cat-practice .lcard { --c: var(--practice); }
.cat-exam .lcard { --c: var(--exam); }
.lc-mark { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, transparent); flex-shrink: 0; }
.lc-mark .tile.sm { --w: 28px; margin-bottom: 4px; }
.lc-mark img { width: 42px; height: 42px; }
.lc-svg { color: var(--c); display: flex; }
.lc-svg svg { width: 30px; height: 30px; }
.lc-svg .ln { stroke: #fff; }
.lc-t { flex: 1; }
.lc-t b { display: block; font-size: 17px; font-weight: 800; }
.lc-t small { font-size: 13px; line-height: 1.4; display: block; }
.lcard .go { background: var(--c); color: #fff; }

/* 点数の選択（一覧から選ぶ） */
.pf { min-width: 9.5em; padding: 9px 12px; border-radius: 10px; border: 1.5px dashed var(--muted); background: var(--card); color: var(--muted);
  font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; }
.pf.set { border: 1.5px solid var(--select); color: var(--text); background: #eef4ff; }
.pf.ok { border: 1.5px solid var(--ok); background: var(--ok-soft); color: var(--text); }
.pf.ng { border: 1.5px solid var(--ng); background: var(--ng-soft); color: var(--text); }
.pf:disabled { cursor: default; }
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet { width: 100%; max-width: 560px; max-height: 72vh; display: flex; flex-direction: column; background: var(--card); border-radius: 20px 20px 0 0;
  padding: 6px 12px max(12px, env(safe-area-inset-bottom)); animation: up .18s ease-out; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; font-weight: 800; font-size: 16px; }
.sheet-x { width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--bg); color: var(--text); font-size: 20px; cursor: pointer; }
.sheet-list { overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.pv { padding: 11px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 15px; font-weight: 700;
  cursor: pointer; font-variant-numeric: tabular-nums; }
.pv.on { border-color: var(--select); background: #eef4ff; }
.pv-h { grid-column: 1 / -1; margin: 8px 2px 0; padding-bottom: 2px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 800; color: var(--muted); }
.pv-h:first-child { margin-top: 0; }
.sheet-opt { display: block; width: 100%; text-align: left; padding: 12px; margin: 4px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font-size: 15px; }
.sheet-opt small { display: block; }
.sheet-opt.on { border: 2px solid var(--felt); background: var(--accent-soft); }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }

/* 連続正解 */
.combo { display: inline-block; margin: 0 0 6px; padding: 3px 12px; border-radius: 999px; background: var(--review); color: #fff; font-weight: 800; font-size: 14px;
  animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } }

/* ---------- 学習記録 ---------- */
.stiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.stile { padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--sc) 10%, transparent); }
.stile small { display: block; font-size: 12px; }
.stile b { display: block; font-size: 24px; font-weight: 800; color: var(--sc); line-height: 1.3; }
.stile b + small { font-size: 11px; }
.graph { display: flex; align-items: flex-end; height: 120px; }
.gb { position: relative; flex: 1; height: 100%; }
.gb i { position: absolute; bottom: 0; left: 15%; width: 70%; border-radius: 3px 3px 0 0; }
.gn { background: color-mix(in srgb, var(--ng) 35%, transparent); }
.gc { background: var(--ok); }
.graph-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tbl.kl th, .tbl.kl td { border-width: 0 0 1px; }
.tbl.kl th { background: none; font-size: 13px; }
.tbl.kl tr:first-child th { color: var(--muted); font-weight: 400; font-size: 12px; }
.tbl.kl tr th:first-child { text-align: left; }
.tbl.kl td b { display: block; }
.tbl.kl td small { font-size: 10px; display: block; line-height: 1.3; }
.tbl.kl td.na { color: var(--muted); }
b.hi { color: var(--ok); }
b.lo { color: var(--ng); }
.wk-h { font-size: 14px; color: var(--record); margin: 10px 0 2px; }
.bar-row { padding: 3px 0; font-size: 14px; }
.bar-row > div { display: flex; justify-content: space-between; gap: 8px; }
.bar-row > i { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.bar-row > i > i { display: block; height: 8px; border-radius: 4px; background: var(--review); }
.ex-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ex-row > div:first-child { flex: 1; }
.ex-row small { display: block; }
.ex-r { text-align: right; }
.ex-r small.up { color: var(--ok); }
.ex-r small.dn { color: var(--ng); }

/* 学ぶページのフリガナ */
.furi { line-height: 2.1; }
.furi .tbl th, .furi .tbl td { line-height: 1.9; }
ruby rt { font-size: .5em; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.bar ruby rt, .feedback ruby rt { color: inherit; }

/* 問題の手牌（緑の台）と答えの選択枠 */
.hand-table { margin: 10px 0; padding: 8px 8px 4px; border-radius: 14px; background: linear-gradient(var(--felt), #14513a); }
.ht-l { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.hand-table .hand { margin: 6px 0 4px; }
.hand-table .win small { color: rgba(255, 255, 255, .85); }
.hand.one-row { flex-wrap: nowrap; padding-top: 8px; --tw: min(calc((min(100vw, 720px) - 50px) / 14) - 1px, 46px); }
.exq .hand.one-row { --tw: min(calc((min(100vw, 720px) - 76px) / 14) - 1px, 44px); }
.q-item .hand .pick.on { transform: translateY(-8px); }
.picker { margin: 10px 0; padding: 10px; border-radius: 14px; background: #eef4ff; border: 1.5px solid rgba(47, 111, 224, .45); }
.pk-h { font-size: 14px; font-weight: 800; color: var(--select); margin-bottom: 6px; }
.prow { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; margin-bottom: 6px; }
.pk-l { width: 30px; flex-shrink: 0; font-size: 11px; line-height: 1.2; color: var(--muted); }
.pk-t { display: flex; gap: 3px; flex-wrap: nowrap; }
.prow .tile { --w: min(calc((min(100vw, 720px) - 32px - 22px - 30px - 44px) / 9), 36px); }
.exq .prow .tile { --w: min(calc((min(100vw, 720px) - 58px - 22px - 30px - 44px) / 9), 36px); }
.sel-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; min-height: 28px; }
.sel-tiles { display: inline-flex; flex-wrap: wrap; align-items: center; }
.hand-table .hand .pick.on { outline: 3px solid var(--yellow); background: #fffbe8; }
.picker .prow .pick.on { outline: 3px solid var(--select); background: #dbe7ff; }
.home-note { text-align: center; margin-top: 18px; }

/* お知らせ（保存の失敗など） */
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; max-width: 520px; margin: 0 auto;
  padding: 12px 14px; border-radius: 12px; background: #2b2b2b; color: #fff; font-size: 14px; line-height: 1.5;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.gen-fail { text-align: center; }

/* 解説の下の「学ぶ」へのリンク */
.learn-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.learn-links a { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--felt); font-size: 13px; font-weight: 700; text-decoration: none; }
/* ホームの「今日の練習」 */
.today-card { margin-bottom: 0; }
.today-card .rc-ic { color: var(--felt); }
.today-card .go { background: var(--felt); }
/* 手牌研究 */
.st-hand { min-height: 48px; align-items: flex-end; flex-wrap: nowrap; --tw: min(calc((min(100vw, 720px) - 92px) / 14.5) - 1px, 40px); }
.st-empty { color: rgba(255, 255, 255, .8); }
.st-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.st-tg { min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font-weight: 700; font-size: 14px; touch-action: manipulation; }
.st-tg.on { border-color: var(--felt); background: var(--accent-soft); color: var(--felt); }
.st-dora { display: flex; align-items: center; gap: 4px; font-size: 13px; min-height: 34px; }
.st-picker .pick:disabled { opacity: .3; }
.st-h { margin: 14px 0 4px; font-size: 15px; }
.ng-t { color: var(--ng); font-weight: 700; }

/* 問題の共有ボタン・今日の共通問題 */
.share-q { margin-left: auto; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--felt); font-size: 13px; font-weight: 700; touch-action: manipulation; }
.feedback .share-q { margin: 8px 0 0; }
.daily-card { margin-top: 10px; }
.daily-card .rc-ic { color: #c77700; }
.daily-card .go { background: #c77700; }

/* 記録の書き出し・読み込み、問題の報告 */
.rec-io { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sub-btn { min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--felt); background: var(--card); color: var(--felt); font-weight: 800; font-size: 14px; }
.report { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--muted); }