.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card a { font-weight: 700; font-size: 13px; text-decoration: none; }
.lbl {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 12px; color: var(--accent); letter-spacing: .12em;
}
.seats { display: flex; flex-direction: column; }
.seat { display: flex; align-items: center; gap: 12px; padding: 0; border-radius: 14px; }
.who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.name { font-weight: 900; font-size: 15px; }
.sub { font-weight: 700; font-size: 12px; color: var(--muted); }
.sub:empty { display: none; }
.seat .stone { width: 30px; height: 30px; flex: none; }
.num { margin-left: auto; font: 700 28px var(--num); }
.num.dim { color: var(--note); }
body[data-phase="playing"] .seats-card,
body[data-phase="result"] .seats-card { padding: 8px; gap: 0; }
body[data-phase="playing"] .seat,
body[data-phase="result"] .seat { padding: 16px 14px; }
body[data-phase="playing"] .name,
body[data-phase="result"] .name { font-size: 16px; }
body[data-phase="playing"] .seat .stone,
body[data-phase="result"] .seat .stone { width: 36px; height: 36px; }
body[data-phase="playing"] .seat .num,
body[data-phase="result"] .seat .num { font-size: 38px; }
.seat.on { background: var(--turn); box-shadow: inset 4px 0 0 var(--accent); }
.seat.on .sub { color: var(--accent); }
.seat.win { background: var(--turn); }
.seat.win .sub { color: var(--accent); }

.levels { display: flex; justify-content: space-between; }
.lvl {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 11px var(--font); color: var(--lvl-ink);
}
.lvl b {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink);
  box-sizing: border-box; display: block;
}
.lvl b[data-order="0"] { background: var(--lv0); }
.lvl b[data-order="1"] { background: var(--lv1); }
.lvl b[data-order="2"] { background: var(--lv2); }
.lvl b[data-order="3"] { background: var(--lv3); }
.lvl b[data-order="4"] { background: var(--lv4); }
.lvl[aria-pressed="true"] { color: var(--ink); }
.lvl[aria-pressed="true"] b { outline: 2.5px solid var(--accent); outline-offset: 3px; }

.colors { display: flex; gap: 8px; }
.chip {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border: 2px solid var(--ink); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); font: 700 13px var(--font); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.pip { width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; display: block; }
.chip[data-color="1"] .pip { background: var(--pip); border: 2px solid var(--ink); }
.chip[data-color="1"][aria-pressed="true"] .pip { border-color: var(--white); }
.chip[data-color="2"] .pip { background: var(--white); border: 2px solid var(--ink); }

.switches { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.settings .switches { margin: 0; padding: 0; border: 0; }
.switch {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: 700 13px var(--font); color: var(--ink);
}
.sw { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--accent); position: relative; flex: none; }
.sw i { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); }
.switch[aria-checked="false"] .sw { background: var(--lv1); }
.switch[aria-checked="false"] .sw i { right: auto; left: 3px; }


.bar {
  height: 14px; border-radius: var(--radius-pill); overflow: hidden; display: flex;
  border: 2px solid var(--ink);
}
.bar i { display: block; background: var(--ink); }
.bar b { flex: 1; background: var(--card); }
.kifu { font: 500 13px/1.7 var(--num); color: var(--note); white-space: pre-line; }
.kifu-head { display: flex; justify-content: space-between; font: 700 12px var(--font); color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.eval-label { font-weight: 900; font-size: 15px; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.act {
  height: 48px; border: 2px solid var(--ink); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); font: 700 14px var(--font); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.act:disabled { opacity: .4; cursor: default; }
.settings .act {
  width: 100%; height: 48px; flex-direction: row; border: 2px solid var(--ink);
  border-radius: var(--radius-pill); font-size: 14px; background: transparent;
}
.act[data-act="restart"] .ico { display: none; }
.legend { font: 700 12px/1.7 var(--font); color: var(--muted); white-space: pre-line; }
.only-mobile { display: none; }

.overlay {
  box-sizing: border-box; width: min(456px, calc(100% - 48px));
  padding: 30px 40px 28px; border-radius: var(--radius-panel);
  background: var(--overlay); display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: var(--shadow-panel);
}
.overlay.result {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(416px, calc(100% - 48px));
  background: var(--overlay-result); padding: 30px 36px 26px; gap: 10px;
}
.overlay .overlay-title { font-weight: 900; font-size: 24px; letter-spacing: .04em; text-align: center; }
.overlay.result .overlay-title { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
.result-copy, .result-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.lead { font-size: 13px; line-height: 1.7; color: var(--note); text-align: center; }
.end-kicker { font-weight: 700; font-size: 13px; color: var(--accent); letter-spacing: .12em; }
.scoreline { display: flex; align-items: center; gap: 14px; font: 700 34px var(--num); }
.scoreline .stone { width: 26px; height: 26px; }
.scoreline .dash { color: var(--faint); }
.big {
  width: 100%; height: 54px; border-radius: var(--radius-pill); border: 0;
  background: var(--accent); color: var(--white); box-shadow: var(--shadow-btn);
  font: 900 16px var(--font); letter-spacing: .06em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.big.ghost {
  height: 48px; font-weight: 700; font-size: 15px; letter-spacing: 0;
  border: 2px solid var(--ink); background: transparent; color: var(--ink); box-shadow: none;
}
.overlay.result .big { height: 52px; margin-top: 8px; }
.overlay.result .big.ghost { height: 46px; margin-top: 0; font-size: 14px; }
.big.dark { height: 46px; background: var(--ink); color: var(--white); box-shadow: none; font-size: 14px; letter-spacing: 0; font-weight: 700; }
.row-2 { display: contents; }
.rv { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rv b { flex: none; width: 44px; font: 700 13px var(--num); color: var(--accent-deep); }
.rv span { font: 700 13px/1.6 var(--font); color: var(--accent); }
.quiet { font: 700 13px var(--font); color: var(--note); }
.tap-hint { display: none; }
.pass {
  position: absolute; z-index: 3; left: 50%; top: 0; transform: translate(-50%, -120%);
  height: 38px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink);
  font: 700 13px var(--font); display: flex; align-items: center; box-shadow: var(--shadow-card);
}

@media (max-width: 767px) {
  .setup-tools { background: transparent; box-shadow: none; padding: 0; }
  .setup-tools [data-lbl="level"],
  .setup-tools .switches { display: none; }
  .lvl b { width: 34px; height: 34px; }
  .lvl { min-width: 52px; }
  .only-pc { display: none; }
  .only-mobile { display: flex; }
  .big.primary { height: 58px; font-size: 18px; letter-spacing: .08em; }
  .row-2 { display: flex; gap: 10px; width: 100%; }
  .row-2 .big { font-size: 14px; font-weight: 700; letter-spacing: 0; }
  .row-2 .long, .share-card .long, .back .long { display: none; }
  .row-2 .short, .share-card .short, .back .short { display: inline; }
  .overlay.setup { width: 100%; background: transparent; box-shadow: none; padding: 0; gap: 10px; }
  .overlay.setup .flight, .overlay.setup .overlay-title, .overlay.setup .lead { display: none; }
  .seats { flex-direction: row; gap: 10px; }
  .seats-card { background: transparent; box-shadow: none; padding: 0; }
  .seat {
    flex: 1; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-card); padding: 10px 12px;
  }
  /* PC の body[data-phase="playing"] .seat… に負けないよう同じ強さで書く（2026-11-12 手機で名前が折り返した） */
  body[data-phase] .seats-card { padding: 0; }
  body[data-phase] .seat { padding: 10px 12px; gap: 10px; }
  body[data-phase] .seat .stone { width: 28px; height: 28px; }
  .name { font-size: 13px; white-space: nowrap; }
  .sub { font-size: 10px; white-space: nowrap; }
  body[data-phase] .seat .num { font-size: 26px; margin-left: auto; }
  .seat.on { background: var(--card); box-shadow: 0 0 0 2.5px var(--accent); }
  .eval-card {
    background: transparent; box-shadow: none; padding: 0; flex-direction: row;
    align-items: center; gap: 10px; font-weight: 700; font-size: 11px; color: var(--muted);
  }
  .eval-card .kifu, .eval-card .kifu-head { display: none; }
  .eval-card .lbl { font: 700 11px var(--font); color: var(--muted); letter-spacing: 0; flex: none; }
  .eval-card .lbl svg { display: none; }
  .eval-card [data-eval-body] { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .bar { height: 8px; border-width: 1.5px; flex: 1; }
  .eval-label { font-size: 11px; font-weight: 700; color: var(--ink); }
  .actions {
    position: fixed; left: 16px; right: 16px; bottom: 34px; z-index: 4;
    display: flex; justify-content: space-between; background: transparent;
  }
  .act {
    width: auto; height: auto; border: 0; background: transparent; flex-direction: column;
    font-size: 11px; gap: 6px;
  }
  .act .ico {
    width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink);
    background: var(--card); display: flex; align-items: center; justify-content: center;
  }
  .act.dark .ico { background: var(--ink); color: var(--white); }
  .act[data-act="restart"] .ico { display: flex; }
  .legend { display: none; }
  body[data-phase="playing"] .tap-hint {
    display: block; text-align: center; font: 700 13px var(--font); color: var(--note); margin: 14px 0 0;
  }
  body[data-phase="result"] .board-col {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    background: var(--card); border-radius: var(--radius-card); padding: 16px; box-shadow: var(--shadow-card);
  }
  body[data-phase="result"] .overlay.result { display: contents; }
  body[data-phase="result"] .result-copy {
    flex: 1; align-items: flex-start; gap: 6px; width: auto; min-width: 0;
  }
  body[data-phase="result"] .result-actions { flex-basis: 100%; align-items: stretch; }
  body[data-phase="result"] .overlay.result .overlay-title { font-size: 22px; line-height: 1.15; text-align: left; }
  body[data-phase="result"] .scoreline { font-size: 24px; gap: 0; }
  body[data-phase="result"] .end-kicker { font-size: 11px; letter-spacing: .1em; }
  body[data-phase="result"] .result-actions { flex-basis: 100%; }
  .share-card {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; border-radius: 0;
    background: var(--bg); box-shadow: 0 -10px 20px -14px rgb(0 0 0 / .35);
    padding: 12px 16px calc(18px + var(--safe-bottom, 0px)); flex-direction: row; gap: 10px;
  }
  .share-card .lbl { display: none; }
  .share-card .big { height: 48px; }
  .rv { gap: 10px; padding: 9px 0; font: 700 12px/1.6 var(--font); }
  .rv b { width: 40px; font-size: 12px; }
}