/* 雀荘の卓：深い緑のマットに金の差し色 */
:root {
  --felt: #17513a;        /* 卓のマット */
  --felt-deep: #0f3a29;   /* くぼみ・カード */
  --felt-line: #2a6b4f;   /* カードのふち */
  --felt-hi: #1f6447;     /* 押したとき・選んだとき */
  --ink: #f3ead2;         /* 文字（生成り） */
  --sub: #b9d2c3;         /* 小さい文字 */
  --gold: #d9b45a;        /* 差し色 */
  --gold-ink: #2a1d05;    /* 金の上の文字 */
  --ok: #7fdc9e;
  --ng: #ff8a73;
  --ron: #f2b8a8;
  --tsumo: #a9cdf2;
  --tile-edge: #c9b88f;   /* 牌の厚み */
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--felt); color: var(--ink);
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif; }
body {
  /* マットの細かい織り目 */
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 4px 4px;
  min-height: 100vh;
}
#app { max-width: 520px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 24px); }
.hidden { display: none !important; }
.top { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
h1 { font-size: 22px; margin: 0; letter-spacing: .04em; }
h2 { font-size: 13px; margin: 0 0 10px; color: var(--sub); font-weight: 600; letter-spacing: .06em; }
h3 { font-size: 13px; margin: 0 0 8px; color: var(--sub); font-weight: 600; letter-spacing: .06em; }
.card { background: var(--felt-deep); border-radius: 14px; padding: 14px; margin-bottom: 12px;
  border: 1px solid var(--felt-line); }
.note { color: var(--sub); font-size: 13px; text-align: center; margin: 4px 0 10px; }
.note.left { text-align: left; }
.mt { margin-top: 12px; }

/* ボタン */
button { font: inherit; color: var(--ink); border: 1px solid var(--felt-line); background: var(--felt-deep);
  border-radius: 10px; padding: 10px; cursor: pointer; touch-action: manipulation; }
button:active { transform: scale(.97); background: var(--felt-hi); }
.primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.primary:active { background: #c9a44c; }
.big { width: 100%; padding: 15px; font-size: 17px; margin-bottom: 10px; letter-spacing: .08em;
  box-shadow: 0 3px 0 #9c7f37; }
.ghost { width: 100%; background: transparent; }
.danger { color: var(--ng); }
.small { padding: 6px 12px; font-size: 13px; }
.icon { border: none; background: transparent; font-size: 22px; padding: 4px 8px; color: var(--ink); }
.icon:active { background: transparent; }

/* チップ・切り替え */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 12px; font-size: 14px; border-radius: 999px; }
.chip.on, .seg button.on, .grid button.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; }
.switch { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
.switch.card { padding: 12px 14px; }
.switch input { width: 20px; height: 20px; accent-color: var(--gold); }

/* モード・ステージ */
.mode-card, .stage-card { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 2px 12px; text-align: left; padding: 14px; }
.mode-no, .stage-id { grid-row: span 2; font-size: 12px; font-weight: 800; color: var(--gold-ink);
  background: var(--gold); border-radius: 8px; padding: 7px 8px; text-align: center; min-width: 46px; }
.mode-name, .stage-name { font-size: 17px; font-weight: 700; }
.mode-desc, .stage-sub { grid-column: 2; font-size: 12px; color: var(--sub); }
.mode-rate { grid-row: 1 / span 2; grid-column: 3; font-size: 12px; color: var(--gold); }
.stage-card:disabled { opacity: .45; }

/* 問題 */
.quiz-top { gap: 12px; }
.progress { flex: 1; height: 6px; background: var(--felt-deep); border-radius: 3px; overflow: hidden; }
#progressBar { height: 100%; background: var(--gold); width: 0; transition: width .2s; }
#timer { font-variant-numeric: tabular-nums; color: var(--sub); font-size: 14px; min-width: 64px; text-align: right; }
#timer.warn { color: var(--ng); font-weight: 800; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14px; margin-bottom: 10px; }
.badge { background: var(--felt-hi); color: var(--ink); border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 600; }
.badge.ron { background: var(--ron); color: #5a1a0c; }
.badge.tsumo { background: var(--tsumo); color: #0c2f55; }
.qtext { font-size: 20px; line-height: 1.6; text-align: center; margin: 10px 0; }
.qtext b { font-size: 30px; color: var(--gold); letter-spacing: .02em; }
.honba { font-size: 15px; color: var(--sub); }
.dora { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); margin-bottom: 4px; }

/* 牌（絵は tiles/ の SVG。表の地 Front.svg に絵柄を重ねる） */
.problem { --tw: min(30px, calc((min(100vw, 520px) - 32px - 20px - 30px) / 14)); padding: 14px 10px; }
.hand { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1px; row-gap: 10px; }
.gap { width: 6px; flex: none; }
.tile { position: relative; flex: none; width: var(--tw, 28px); height: calc(var(--tw, 28px) * 4 / 3);
  border-radius: calc(var(--tw, 28px) * .12); box-shadow: 0 calc(var(--tw, 28px) * .1) 0 var(--tile-edge); }
.tile .face { position: absolute; left: 0; top: 0; width: var(--tw, 28px); height: calc(var(--tw, 28px) * 4 / 3);
  background: url(tiles/Front.svg) center / 100% 100% no-repeat; border-radius: inherit; }
.tile .face.back { background-image: url(tiles/Back.svg); }
.tile img { width: 100%; height: 100%; display: block; pointer-events: none; }
/* 鳴いた牌は横向き */
.tile.side { width: calc(var(--tw, 28px) * 4 / 3); height: var(--tw, 28px); }
.tile.side .face { transform-origin: top left; transform: translateX(calc(var(--tw, 28px) * 4 / 3)) rotate(90deg); }
.tile.win { margin-left: 7px; outline: 2px solid var(--gold); outline-offset: 2px; }
.tile.mini { --tw: 20px; }

/* 入力 */
.grid { display: grid; gap: 6px; }
.grid.fu { grid-template-columns: repeat(6, 1fr); }
.grid.han { grid-template-columns: repeat(7, 1fr); }
.grid.han4 { grid-template-columns: repeat(4, 1fr); }
.grid.abc { grid-template-columns: repeat(3, 1fr); }
.grid.abc button { font-size: 18px; font-weight: 700; padding: 14px 0; }
.grid.pad { grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.grid button { padding: 11px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.score-fields { display: flex; gap: 8px; }
.sf { flex: 1; background: var(--ink); color: var(--felt); border: 2px solid transparent; border-radius: 10px;
  padding: 6px 10px; text-align: right; }
.sf.on { border-color: var(--gold); }
.sf label { display: block; font-size: 11px; color: #5b7a6a; text-align: left; }
.sf span { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 30px; display: block; }

/* 高点法の読み方 */
.readings { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.reading { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--felt-line); padding-top: 10px; }
.rlabel { font-weight: 800; font-size: 18px; color: var(--gold); width: 18px; }
.rgroups { display: flex; flex-wrap: wrap; gap: 8px 6px; flex: 1; }
.rg { display: flex; gap: 1px; padding: 3px 3px 5px; border-radius: 5px; }
.rg.rwin { outline: 2px solid var(--gold); }
.rwait { font-size: 12px; color: var(--sub); white-space: nowrap; }

/* 結果・解説 */
.verdict { font-size: 15px; }
.verdict .head { font-size: 24px; font-weight: 800; margin-bottom: 8px; letter-spacing: .06em; }
.verdict .head.ok { color: var(--ok); }
.verdict .head.ng { color: var(--ng); }
.verdict table { width: 100%; border-collapse: collapse; }
.verdict td { padding: 6px 2px; border-top: 1px solid var(--felt-line); }
.verdict td.mark { width: 24px; font-weight: 800; }
.mark.ok { color: var(--ok); } .mark.ng { color: var(--ng); }
.explain { font-size: 14px; line-height: 1.75; }
.explain ul { margin: 4px 0 8px; padding-left: 18px; }
.explain .k, td.k { color: var(--sub); font-size: 12px; }
table.cmp { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; }
table.cmp th, table.cmp td { border-top: 1px solid var(--felt-line); padding: 6px 4px; text-align: left; vertical-align: top; }
table.cmp th { color: var(--gold); font-weight: 700; }
.big-num { text-align: center; font-size: 44px; font-weight: 800; color: var(--gold); }
.big-num small { display: block; font-size: 13px; color: var(--sub); font-weight: 400; margin-top: 4px; }
.stat-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--felt-line); font-size: 14px; }
.stat-row:first-of-type { border-top: none; }
.bar { height: 6px; background: var(--felt); border-radius: 3px; margin: 2px 0 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); }