/* 麻雀クラシック。色はポータルのテーマ「インク＆オレンジ」(src/styles/global.css) に合わせる。卓の緑はゲームの道具の色
 * 大きさは JS が画面に合わせて --ht (手牌)・--rt (河)・--mt (鳴いた牌) を決める。スマホの横持ちが主・縦持ちは 2 段タップ */
:root {
  --bg: #f4f5f9; --surface: #fff; --text: #161b2e; --muted: #5a6178; --line: #e3e5ee;
  --ink: #161b2e; --accent: #ff7a1a; --accent-ink: #b84a00; --accent-shadow: #c85a08; --accent-soft: #fff1e6;
  --link: #2456d3; --pop: #ffcc00; --ok: #13804a; --danger: #d4343a; --felt: #13804a; --felt-dark: #0d5c35;
  --ht: 40px; --rt: 18px; --mt: 22px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif; }
body { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; touch-action: manipulation; }
.top { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--ink); color: #fff; }
.top a { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
.top .pub { margin-left: auto; font-size: 12px; background: rgb(255 255 255 / 15%); padding: 2px 10px; border-radius: 999px; }
section { width: 100%; }
.lobby { max-width: 560px; padding: 12px 16px 16px; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn.main { background: var(--accent); color: var(--ink); box-shadow: 0 3px 0 var(--accent-shadow); width: 100%; font-size: 17px; }
.btn.sub { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
.note { min-height: 1.2em; color: var(--danger); font-size: 13px; text-align: center; margin: 4px 0; }
.note.info { color: var(--muted); }
.fine { font-size: 11px; color: var(--muted); text-align: center; margin: 10px 0; padding: 0 16px; }
.lead { text-align: center; font-size: 14px; color: var(--muted); margin: 0 0 14px; }
h2 { font-size: 15px; margin: 20px 0 8px; }
.rooms { list-style: none; margin: 0; padding: 0; }
.rooms li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border-radius: 12px; margin-bottom: 8px; }
.rooms li.empty { color: var(--muted); justify-content: center; }
.rooms a { margin-left: auto; font-weight: 800; color: var(--link); text-decoration: none; white-space: nowrap; }
.rooms .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rooms .n { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); }
.rooms .rec { flex: none; font-size: 10px; font-weight: 800; background: var(--pop); border-radius: 999px; padding: 1px 6px; }
.av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; background: #999; flex: none; }
.hero { display: flex; justify-content: center; gap: 6px; margin: 14px 0 10px; --ht: 44px; }

/* 牌 */
.tile { position: relative; display: inline-block; width: var(--ht); height: calc(var(--ht) * 4 / 3); flex: none; padding: 0; border: 0; background: none; line-height: 0; }
.tile svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 0 #9aa1b4); }
button.tile { cursor: pointer; transition: transform .08s; }
button.tile[disabled] { cursor: default; }
button.tile.dim svg { opacity: .45; }
button.tile.sel { transform: translateY(-28%) scale(1.22); z-index: 2; }
button.tile.sel svg { filter: drop-shadow(0 3px 0 var(--accent-shadow)) drop-shadow(0 0 4px var(--accent)); }
button.tile.drawn { margin-left: calc(var(--ht) * .3); }
.tile.win svg { filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 2px var(--accent)); }

/* 待ち・部屋 */
.room { display: flex; flex-direction: column; align-items: center; }
.wait { width: 100%; max-width: 560px; padding: 12px 16px; }
.wait-seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wait-seats .ws { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 12px; padding: 8px 10px; font-size: 14px; min-width: 0; }
.wait-seats .ws span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-seats .ws.empty { color: var(--muted); }
.status { text-align: center; font-weight: 700; font-size: 14px; margin: 6px 0; min-height: 1.3em; }
.actions { display: grid; gap: 8px; margin-top: 8px; }
.watch { font-size: 12px; color: var(--muted); text-align: center; margin: 4px 0 0; }

/* 卓 */
.table { width: 100%; max-width: 1100px; display: flex; flex-direction: column; padding: 4px 6px 0; }
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; padding: 2px 4px 4px; }
.bar .round { background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 10px; }
.bar .dora { display: inline-flex; align-items: center; gap: 2px; --ht: 18px; }
.bar .dora::before { content: 'ドラ'; margin-right: 3px; color: var(--muted); }
.bar .left { color: var(--muted); }
.bar .hash { margin-left: auto; font: inherit; font-size: 11px; color: var(--muted); background: #fff; border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 2px 8px; cursor: pointer; font-family: ui-monospace, monospace; }

.board { position: relative; display: grid; gap: 4px; background: radial-gradient(circle at 50% 45%, var(--felt), var(--felt-dark)); border-radius: 14px; padding: 6px;
  grid-template-columns: 1fr auto 1fr; grid-template-rows: auto 1fr auto; }
/* 名前の箱は角に置く (左上＝左の人・右上＝向こうの人・右下＝右の人)。河は卓の中で 1 周させる */
.board .p3 { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
.board .p2 { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; }
.board .p1 { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; }
.board .r2 { grid-column: 2; grid-row: 1; }
.board .r3 { grid-column: 1; grid-row: 2; justify-self: end; }
.board .r1 { grid-column: 3; grid-row: 2; justify-self: start; }
.board .r0 { grid-column: 2; grid-row: 3; }
.board .center { grid-column: 2; grid-row: 2; }
.pl { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #fff; min-width: 0; flex-wrap: wrap; }
.pl .nm { font-weight: 700; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .wd { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #fff; color: var(--ink); font-weight: 900; font-size: 12px; }
.pl .wd.dealer { background: var(--pop); }
.pl .pt { font-variant-numeric: tabular-nums; font-weight: 800; }
.pl .rii { background: #fff; color: var(--danger); border-radius: 999px; padding: 0 6px; font-weight: 900; font-size: 10px; }
.pl .tag { background: rgb(0 0 0 / 35%); border-radius: 999px; padding: 0 6px; font-size: 10px; }
.pl .tag.me { background: var(--accent); color: var(--ink); font-weight: 800; }
.pl .timer { background: #fff; color: var(--ink); border-radius: 999px; padding: 0 6px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pl .timer.think { font-weight: 700; opacity: .85; }
.pl.turn .nm { color: var(--pop); }
.pl .melds { --ht: var(--mt); }

.p0 { color: var(--ink); justify-content: center; padding: 2px 0; }
.p0 .wd { background: var(--ink); color: #fff; }
.p0 .wd.dealer { background: var(--pop); color: var(--ink); }
.p0.turn .nm { color: var(--accent-ink); }
.p0 .rii { box-shadow: inset 0 0 0 1px var(--danger); }
.p0 .tag { background: var(--line); }

/* 河: 1 段 6 枚。向こうの人は上下逆・左右の人は横向き */
.river { display: flex; --ht: var(--rt); align-self: center; justify-self: center; }
.river .tile.called svg { opacity: .35; }
.river .tile.rii svg { filter: drop-shadow(0 0 0 #000) drop-shadow(0 2px 0 var(--danger)); }
.river .tile.last svg { filter: drop-shadow(0 0 3px var(--pop)) drop-shadow(0 0 2px var(--pop)); }
.r0 { flex-wrap: wrap; width: calc(var(--rt) * 6); align-content: flex-start; min-height: calc(var(--rt) * 4 / 3 * 3); }
.r2 { flex-wrap: wrap-reverse; flex-direction: row-reverse; width: calc(var(--rt) * 6); min-height: calc(var(--rt) * 4 / 3 * 3); }
.r2 .tile { transform: rotate(180deg); }
.r1, .r3 { flex-direction: column-reverse; flex-wrap: wrap; height: calc(var(--rt) * 6); min-width: calc(var(--rt) * 4 / 3 * 3); }
.r3 { flex-direction: column; flex-wrap: wrap-reverse; }
.r1 .tile, .r3 .tile { width: calc(var(--rt) * 4 / 3); height: var(--rt); }
.r1 .tile svg, .r3 .tile svg { position: absolute; width: var(--rt); height: calc(var(--rt) * 4 / 3); left: calc(var(--rt) / 6); top: calc(var(--rt) / -6); }
.r1 .tile svg { transform: rotate(-90deg); }
.r3 .tile svg { transform: rotate(90deg); }
.center { display: grid; place-items: center; align-content: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 700; text-align: center; min-height: calc(var(--rt) * 4); }
.center .big { font-size: 16px; font-weight: 900; }
.center .claim { background: rgb(0 0 0 / 35%); border-radius: 999px; padding: 2px 10px; display: inline-flex; gap: 6px; align-items: center; --ht: calc(var(--rt) * 1.2); }
.center .flash { font-size: 20px; font-weight: 900; color: var(--pop); text-shadow: 0 2px 0 rgb(0 0 0 / 40%); min-height: 1.2em; }

/* 自分 */
.mine { position: relative; display: flex; flex-direction: column; align-items: stretch; padding-top: 4px; }
.me-line { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.me-line .status { margin: 0; }
.hand-row { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--ht) * .3); min-height: calc(var(--ht) * 4 / 3 + var(--ht) * .45); padding-top: calc(var(--ht) * .45); }
.hand { display: flex; align-items: flex-end; }
.melds { display: flex; gap: 4px; align-items: flex-end; --ht: var(--mt); }
.meld { display: inline-flex; gap: 0; }
.meld .tile.side svg { transform: rotate(-90deg) translateX(-12%); }
.meld .tile.hidden-face svg rect:first-child { fill: #e9973a; }
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 44px; padding: 2px 0 6px; }
.acts .btn { width: auto; padding: 9px 16px; font-size: 15px; }
.acts .btn.call { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #000; }
.acts .btn.win { background: var(--danger); color: #fff; box-shadow: 0 3px 0 #8f1d22; }
.acts .btn.on { background: var(--pop); }
.acts .btn .tile { --ht: 18px; }
.acts .hint { font-size: 12px; color: var(--muted); align-self: center; }

/* 結果 */
.overlay { position: fixed; inset: 0; background: rgb(22 27 46 / 55%); display: grid; place-items: center; z-index: 20; padding: 10px; }
.sheet { background: #fff; border-radius: 16px; padding: 14px 16px; width: min(560px, 100%); max-height: calc(100dvh - 20px); overflow: auto; }
.sheet h3 { margin: 0 0 6px; font-size: 18px; text-align: center; }
.sheet .sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.sheet .wh { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; --ht: 24px; margin: 6px 0; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0; }
.sheet td, .sheet th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.sheet td.n, .sheet th.n { text-align: right; font-variant-numeric: tabular-nums; }
.sheet tr.first td { font-weight: 900; color: var(--accent-ink); }
.sheet .pts { text-align: center; font-size: 22px; font-weight: 900; margin: 4px 0; }
.sheet .plus { color: var(--ok); }
.sheet .minus { color: var(--danger); }
.sheet .ind { display: flex; justify-content: center; gap: 12px; font-size: 12px; color: var(--muted); --ht: 20px; align-items: center; flex-wrap: wrap; }
.sheet .ind span { display: inline-flex; align-items: center; gap: 2px; }
.verify { margin-top: 10px; padding: 8px 10px; background: var(--bg); border-radius: 10px; font-size: 12px; }
.verify code { word-break: break-all; font-size: 11px; display: block; margin: 2px 0; }
.verify .btn { padding: 8px 14px; font-size: 13px; margin-top: 4px; }
.verify .ok { color: var(--ok); font-weight: 900; }
.verify .ng { color: var(--danger); font-weight: 900; }
.sheet .next { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }

/* 背の低い横持ち (スマホ): 見出しと隙間を詰めて、手牌とボタンまで 1 画面に入れる */
@media (orientation: landscape) and (max-height: 520px) {
  .top { padding: 3px 12px; }
  .top a, .top b { font-size: 13px; }
  .bar { padding: 0 4px 2px; }
  .board { padding: 3px 6px; gap: 2px; }
  .p0 { padding: 0; font-size: 11px; }
  .status { font-size: 13px; min-height: 1.1em; }
  /* ボタンは卓の右下に重ねる */
  .acts { position: absolute; right: 10px; bottom: calc(100% + 6px); min-height: 0; padding: 0; z-index: 5; justify-content: flex-end; max-width: 70%; }
  .acts .hint { display: none; }
  .acts .btn { padding: 7px 14px; font-size: 14px; }
}
/* 縦持ち: 河と鳴いた牌を小さくし、名前の箱を詰める */
@media (orientation: portrait) {
  .pl .nm { max-width: 6em; }
  .acts .btn { padding: 8px 12px; font-size: 14px; }
}