/* 三人麻雀。スマホ縦 (320×640〜) が最優先。牌の大きさは画面の幅から決める */
:root {
  --bg: #10251c; --felt: #17402e; --felt2: #1d4d38; --ink: #f3f1ea; --muted: #a9bdb2; --gold: #ffd54a; --accent: #4fd1c5;
  --danger: #ff7a6b;
  --W: min(100vw, 560px);
  --hw: min(calc((var(--W) - 30px) / 14.7), 38px);      /* 手牌1枚の幅: 14枚+ツモ牌の間が1行に収まる */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.screen { max-width: 560px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); }

/* ---------- タイトル ---------- */
#title h1 { font-size: 28px; margin: 28px 0 8px; letter-spacing: .04em; }
.lead { color: var(--muted); line-height: 1.7; margin: 0 0 20px; }
#home { display: flex; flex-direction: column; gap: 12px; }
.btn { border: 0; border-radius: 12px; padding: 10px 16px; background: #2a5f48; font-weight: 700; }
.btn.big { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px; font-size: 18px; text-align: left; }
.btn.big small { font-size: 12px; font-weight: 400; opacity: .8; }
.btn.gold { background: var(--gold); color: #2b2200; }
.btn.ghost { background: transparent; border: 1px solid #3c6e58; }
.btn:disabled { opacity: .45; cursor: default; }
.foot { color: #6f8a7d; font-size: 12px; margin-top: 32px; }
.rules { line-height: 1.8; padding-left: 1.4em; }
.note { color: var(--muted); font-size: 14px; }

/* ---------- 友達の部屋・ロビー (M3) ---------- */
#friends h2, #lobby h2 { margin: 24px 0 12px; }
#friends .btn.big, #lobby .btn.big { width: 100%; margin-top: 12px; }
#joinForm { display: flex; gap: 8px; margin-top: 16px; }
#codeInput { flex: 1; min-width: 0; font-size: 22px; letter-spacing: .3em; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid #3c6e58; background: #0c1d16; color: var(--ink); }
#lobbyCode { background: var(--felt); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; display: flex; align-items: baseline; gap: 12px; }
#lobbyCode small { color: var(--muted); }
#lobbyCode b { font-size: 38px; letter-spacing: .25em; color: var(--gold); }
#lobbySeats { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#lobbySeats li { display: flex; align-items: center; gap: 10px; background: #0c1d16; border-radius: 12px; padding: 10px 12px; border: 2px solid transparent; }
#lobbySeats li.me { border-color: var(--accent); }
#lobbySeats li.empty { opacity: .5; border: 2px dashed #3c6e58; }
#lobbySeats .av { font-size: 24px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #17402e; flex: none; }
#lobbySeats small { margin-left: auto; color: var(--muted); }
#lobbyMsg { min-height: 2.6em; }

/* ---------- 牌 ----------
 * 絵柄は tiles.js が SVG で描く。ここでは「少しだけ立体」に見せる:
 *   表の面 (象牙色) の下に、牌の厚み (象牙の層 → 背の緑) と影を重ねる。
 *   伏せた牌は背の緑が上。自分の手牌は立っている牌なので、上の面 (厚みと背) が少し見える
 */
.tile {
  --w: var(--hw);
  --face: #fbf7ea; --face2: #ece3cc; --body: #e0d4b2; --back: #2b8a5f; --back2: #1d6646;
  position: relative; display: inline-block; flex: none; vertical-align: bottom;
  width: var(--w); height: calc(var(--w) * 1.33);
  background: linear-gradient(165deg, var(--face) 0%, var(--face) 55%, var(--face2) 100%);
  border-radius: calc(var(--w) * .13);
  /* 厚み (象牙の層 → 背の緑) と影を (--sx, --sy) の向きに出す。向きは「自分の目線で見える面」(下の .side の決まり) */
  --sx: 0; --sy: 1;
  box-shadow: inset 0 0 0 calc(var(--w) * .02) rgba(0,0,0,.08),
    calc(var(--sx) * var(--w) * .06) calc(var(--sy) * var(--w) * .06) 0 var(--body),
    calc(var(--sx) * var(--w) * .15) calc(var(--sy) * var(--w) * .15) 0 var(--back),
    calc(var(--sx) * var(--w) * .2) calc(var(--sy) * var(--w) * .2) calc(var(--w) * .14) rgba(0,0,0,.45);
  margin-bottom: calc(var(--w) * .15);
  user-select: none;
}
.tile svg { position: absolute; inset: 5% 6%; width: 88%; height: 90%; display: block; }
.tile.back { background: linear-gradient(165deg, #3fae7d 0%, var(--back) 60%, var(--back2) 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .06) rgba(255,255,255,.08), 0 calc(var(--w) * .06) 0 var(--back2), 0 calc(var(--w) * .15) 0 var(--body), 0 calc(var(--w) * .2) calc(var(--w) * .14) rgba(0,0,0,.45); }
/* 横にした牌 (鳴いた牌・リーチの宣言牌): ほかの牌と同じ床に置き (回すと浮くので下げる)、
 * 厚みは回す前の向きで「画面の下」に出る向き (--sx: 1) にする。席ごとの向きは下の .side の決まり */
.tile.sideways { --sx: 1; --sy: 0; transform: translateY(calc(var(--w) * .165)) rotate(90deg); margin: 0 calc(var(--w) * .18) calc(var(--w) * .15); }
.tile.called { opacity: .35; }
.tile.last { outline: calc(var(--w) * .09) solid var(--accent); outline-offset: 1px; }
.tile.glow { outline: 3px solid var(--gold); outline-offset: 1px; filter: drop-shadow(0 0 7px rgba(255, 213, 74, .95)); animation: pulse 1.2s ease-in-out infinite; }
.tile.win { outline: 3px solid var(--danger); outline-offset: 1px; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 2px rgba(255, 213, 74, .5)); } }
@media (prefers-reduced-motion: reduce) { .tile.glow, .act.glow, #hand.deal .tile, .side.deal .orow .tile, .stick.on { animation: none; } }

/* ---------- 卓 ----------
 * #stage は 480×480 の設計寸法。app.js が画面に合わせて scale する (--s)。
 * .side は席ごとの河と手牌の置き場で、自分の席 (下) の向きで組んでから卓の中心で回す:
 *   data-pos 0 = 自分 (下) / 1 = 右 (-90度) / 2 = 向かい (180度) / 3 = 左 (90度)。
 *   三麻でも卓は4人用の席のまま3人が座るので、どこが空席かは自分の席で変わる (東家なら左、南家なら向かい、西家なら右)
 */
#game { height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: max(4px, env(safe-area-inset-top)) 6px 0; position: relative; overflow: hidden; }
#bar { display: flex; align-items: center; gap: 8px; font-size: 12px; min-height: 34px; }
#doraBox { display: flex; align-items: center; gap: 4px; background: #0c1d16; border-radius: 8px; padding: 3px 8px 3px 6px; }
#doraBox small { color: var(--muted); font-size: 11px; }
#doraBox .tile { --w: 22px; }
#roundMini { color: var(--gold); font-weight: 800; }
#bar .icon:first-of-type { margin-left: auto; }
.icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3c6e58; background: transparent; flex: none; }
#stageWrap { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
/* 座った人の目の高さから見下ろすように、卓を少しだけ奥へ倒す (牌が読める程度に) */
#stage { position: absolute; left: 50%; bottom: 0; width: 480px; height: 480px; transform: translateX(-50%) scale(var(--s, .7)) perspective(1300px) rotateX(var(--tilt, 14deg)); transform-origin: 50% 100%; }
.felt { position: absolute; inset: 0; border-radius: 28px; background: radial-gradient(circle at 50% 50%, #2c7a55 0%, #1f5f42 55%, #184c35 100%);
  box-shadow: inset 0 0 0 6px #6b4a2b, inset 0 0 0 9px #3f2a17, inset 0 0 40px rgba(0,0,0,.35); }
.side { position: absolute; left: 0; top: 0; width: 480px; height: 480px; transform-origin: 240px 240px; pointer-events: none; }
.side[data-pos="1"] { transform: rotate(-90deg); }
.side[data-pos="2"] { transform: rotate(180deg); }
.side[data-pos="3"] { transform: rotate(90deg); }

/* 見える面の決まり: 自分は卓の手前の真ん中から見下ろしている。どの牌も「手前を向いた面」と
 * 「卓の真ん中の側を向いた面」が見える。
 *   寝ている牌 (河・晒した面子): 自分と向かいの河は下の面 / 左の河は下と右の面 / 右の河は下と左の面
 *   立っている牌 (手牌): 左の人は背と右側面 / 右の人は背と左側面 / 向かいの人は背 (と上の面)
 * 席ごとに回して置いているので、画面での向き S を、その席の回転 R の逆向きに直して (--sx, --sy) に入れる */
.side[data-pos="1"] .tile { --sx: -1; --sy: -.5; }              /* 画面で左下 (R = -90) */
.side[data-pos="1"] .tile.sideways { --sx: -.5; --sy: 1; }
.side[data-pos="3"] .tile { --sx: 1; --sy: -.5; }               /* 画面で右下 (R = 90) */
.side[data-pos="3"] .tile.sideways { --sx: -.5; --sy: -1; }
.side[data-pos="0"] .tile.sideways { --sx: 1; --sy: 0; }        /* 画面で下 (R = 0、横向きの牌だけ回す) */
.side[data-pos="2"] .tile { --sx: 0; --sy: -1; }                /* 画面で下 (R = 180) */
.side[data-pos="2"] .tile.sideways { --sx: -1; --sy: 0; }
.side .river { position: absolute; left: 160px; top: 322px; width: 166px; display: flex; flex-wrap: wrap; gap: 3px 4px; align-content: flex-start; }
.side .river .tile { --w: 24px; }
.side .river .tile.sideways { margin: 0 4px; }
.side .river .tile.ghost { visibility: hidden; }
.side .orow { position: absolute; left: 0; top: 440px; width: 480px; display: flex; justify-content: center; align-items: center; gap: 1px; }
.side .orow .tile { --w: 21px; }
/* 相手の手牌は「立っている牌」: 真上から見た上端と、中央側を向いた背の面 (席の向きで上)、
 * 手前を向いた側面 (--ss の向き)、卓に落ちる影で描く。見えるのは背の側なので緑だけで塗る
 * (左の人は背と右側面、右の人は背と左側面、向かいの人は背。上の「見える面の決まり」) */
.side .orow .tile.back { --ss: 1; height: calc(var(--w) * .62); margin: 0; border-radius: calc(var(--w) * .1);
  background: linear-gradient(to bottom, #3fae7d 0%, #2b8a5f 60%, #237a53 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3),
    calc(var(--ss) * var(--w) * .16) 0 0 #1f6e4b,
    0 calc(var(--w) * -.48) 0 #24774f,
    calc(var(--ss) * var(--w) * .16) calc(var(--w) * -.48) 0 #1a5a3c,
    0 calc(var(--w) * -.6) calc(var(--w) * .3) rgba(0,0,0,.5); }
.side[data-pos="1"] .orow .tile.back { --ss: -1; }
.side[data-pos="2"] .orow .tile.back { --ss: 0; }
/* 右の人は手前の側面が前の牌に重なるので、描く順を逆にする (見た目の並びは同じ) */
.side[data-pos="1"] .orow, .side[data-pos="1"] .orow .melds, .side[data-pos="1"] .orow .meld { flex-direction: row-reverse; }
.side[data-pos="1"] .orow .melds { margin-left: 0; margin-right: 10px; }
.side .orow .tile.back + .tile.back { margin-left: 0; }
.side .orow .drawn { margin-left: 8px; }
.side .orow .melds { margin-left: 10px; }
.side .orow .open { --w: 21px; }
.melds { display: flex; gap: 4px; align-items: flex-end; }
.melds .meld { display: inline-flex; align-items: flex-end; gap: 1px; }

/* 中央の表示 (全自動卓の液晶のつもり): 局・残り枚数・各席の風と点・リーチ棒 */
#center { position: absolute; left: 165px; top: 165px; width: 150px; height: 150px; border-radius: 14px; background: #0b1712; box-shadow: 0 0 0 3px #10251c, 0 6px 16px rgba(0,0,0,.45); color: var(--ink); }
.cround { position: absolute; left: 0; right: 0; top: 44px; text-align: center; font-size: 18px; }
.cround b { color: var(--gold); }
#sticks { display: block; font-size: 11px; color: var(--muted); min-height: 13px; }
.cwall { position: absolute; left: 0; right: 0; top: 84px; text-align: center; font-size: 12px; color: var(--muted); }
.cwall b { color: var(--ink); font-size: 15px; }
.cl { position: absolute; font-size: 12px; line-height: 1.15; text-align: center; padding: 2px 5px; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl:empty { display: none; }
.cl b { font-size: 14px; margin-right: 3px; }
.cl.oya b { color: var(--danger); }
.cl[data-pos="0"] { left: 50%; bottom: 4px; transform: translateX(-50%); }
.cl[data-pos="2"] { left: 50%; top: 4px; transform: translateX(-50%); }
.cl[data-pos="1"] { right: 2px; top: 50%; transform: translateY(-50%); }
.cl[data-pos="3"] { left: 2px; top: 50%; transform: translateY(-50%); }
.cl[data-pos="1"], .cl[data-pos="3"] { display: flex; flex-direction: column; }
.cl.turn { background: var(--gold); color: #2b2200; }
.cl.turn.oya b { color: #a01b0e; }
.stick { position: absolute; display: none; background: #f6f2e6; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.stick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #d0281a; }
.stick.on { display: block; animation: stickIn .35s ease-out; }
.stick[data-pos="0"] { width: 56px; height: 6px; left: 47px; bottom: 28px; }
.stick[data-pos="2"] { width: 56px; height: 6px; left: 47px; top: 28px; }
.stick[data-pos="1"] { width: 6px; height: 40px; right: 8px; top: 10px; }
.stick[data-pos="3"] { width: 6px; height: 40px; left: 8px; bottom: 10px; }
@keyframes stickIn { from { opacity: 0; transform: scale(1.8); } }
.plate { position: absolute; font-size: 14px; background: rgba(8, 20, 14, .8); border-radius: 8px; padding: 3px 8px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate[data-pos="1"] { right: 10px; bottom: 6px; }
.plate[data-pos="2"] { right: 10px; top: 6px; }
.plate[data-pos="3"] { left: 10px; top: 6px; }
.plate:empty { display: none; }
.plate.turn { box-shadow: 0 0 0 2px var(--accent); }
.rch, .plate .rch { background: var(--danger); color: #250500; border-radius: 4px; padding: 0 4px; font-weight: 800; font-size: 11px; margin-left: 4px; }

/* 自分の手牌 (卓の手前・大きく) */
#mine { border-radius: 10px; padding: 0 2px 2px; }
#meLine { display: flex; align-items: center; gap: 8px; font-size: 12px; min-height: 20px; }
#meLine .wind { background: #0c1d16; border-radius: 4px; padding: 1px 4px; font-weight: 700; }
#meLine .wind.oya { background: var(--danger); color: #250500; }
#shanten { color: var(--gold); font-weight: 800; margin-left: auto; }
#handRow { display: flex; align-items: flex-end; gap: 6px; }
#hand { display: flex; align-items: flex-end; gap: 1px; min-height: calc(var(--hw) * 1.36 + 10px); padding-top: 8px; }
#hand .tile { cursor: pointer; transition: transform .08s; margin-top: calc(var(--w) * .2); margin-bottom: 0;
  box-shadow: inset 0 0 0 calc(var(--w) * .02) rgba(0,0,0,.08), 0 calc(var(--w) * -.07) 0 var(--body), 0 calc(var(--w) * -.19) 0 var(--back),
    0 calc(var(--w) * .05) 0 #cdbf9a, 0 calc(var(--w) * .12) calc(var(--w) * .16) rgba(0,0,0,.5); }
#hand .tile.drawn { margin-left: calc(var(--hw) * .45); }
#hand .tile.sel { transform: translateY(-26%); }
#hand .tile.dim { filter: brightness(.55); }
#hand.deal .tile { animation: deal .32s ease-out backwards; }
#myMelds .tile { --w: calc(var(--hw) * .78); }
@keyframes deal { from { opacity: 0; transform: translateY(-40px); } }
.side.deal .orow .tile { animation: deal .32s ease-out backwards; }
#mine.turn #hand { filter: drop-shadow(0 0 6px rgba(79, 209, 197, .55)); }
#coach { display: flex; align-items: center; gap: 6px; min-height: 36px; background: #0c1d16; border-radius: 10px; padding: 6px 6px 6px 12px; font-size: 14px; line-height: 1.35; }
#coach [data-coach] { flex: 1; }
#coach .coachOff { border: 0; background: transparent; color: var(--muted); width: 28px; height: 28px; flex: none; }
#coach.hidden { visibility: hidden; }
#actions { display: flex; gap: 8px; min-height: 52px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.act { flex: 1; border: 0; border-radius: 12px; font-size: 18px; font-weight: 800; padding: 10px 0; background: #2a5f48; }
.act[data-a=tsumo], .act[data-a=ron] { background: var(--danger); color: #250500; }
.act[data-a=riichi] { background: #e8a93a; color: #2b1a00; }
.act[data-a=skip] { background: #39524a; }
.act.on { outline: 3px solid var(--ink); }
.act.glow { box-shadow: 0 0 0 3px var(--gold), 0 0 16px 5px rgba(255, 213, 74, .7); animation: pulseb 1.2s ease-in-out infinite; }
@keyframes pulseb { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 4px 1px rgba(255, 213, 74, .35); } }

/* 動き: 飛んでいく牌と、ポン・リーチなどの掛け声 */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
#fx .tile { position: fixed; left: 0; top: 0; margin: 0; will-change: transform; }
.callout { position: fixed; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 30px; font-weight: 900; letter-spacing: .06em; color: #fff;
  -webkit-text-stroke: 1px #3a1200; text-shadow: 0 3px 0 #b5361f, 0 0 18px rgba(255, 120, 60, .9); white-space: nowrap; animation: callout 1.1s ease-out forwards; }
.callout.big { font-size: 46px; }
.callout.calm { text-shadow: 0 3px 0 #1e5d7a, 0 0 18px rgba(79, 209, 197, .9); -webkit-text-stroke: 1px #06222e; }
@keyframes callout { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }

/* ---------- 局の結果 ---------- */
#banner { position: absolute; left: 8px; right: 8px; top: 42px; bottom: 112px; overflow: auto; background: rgba(9, 22, 16, .96); border: 1px solid #3c6e58; border-radius: 14px; padding: 12px; z-index: 5; }
#banner h2 { margin: 0 0 8px; font-size: 18px; color: var(--gold); }
#banner .who { font-weight: 800; font-size: 16px; margin: 6px 0; }
#banner .wh { display: flex; flex-wrap: wrap; gap: 1px; align-items: flex-end; margin-bottom: 6px; }
#banner .wh .tile { --w: min(calc((var(--W) - 60px) / 16), 26px); }
#banner .wh .gap { width: 6px; }
#banner .yaku { list-style: none; padding: 0; margin: 4px 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 14px; }
#banner .yaku li { display: contents; }
#banner .total { font-size: 18px; font-weight: 800; color: var(--gold); margin: 6px 0 10px; }
#banner .delta { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
#banner .delta li { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px solid #23463a; }
#banner .plus { color: #7ee2a8; } #banner .minus { color: var(--danger); }
#banner .ura { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
#banner .ura .tile { --w: 18px; }
#banner .rank { font-size: 18px; }

/* ---------- 吹き出し・通知 ---------- */
#tip { position: fixed; z-index: 20; background: #fff8d6; color: #2b2200; border-radius: 10px; padding: 8px 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#tip .tipArrow { position: absolute; width: 12px; height: 12px; background: #fff8d6; transform: translateX(-50%) rotate(45deg); bottom: -6px; }
#tip.below .tipArrow { bottom: auto; top: -6px; }
.spot { outline: 3px solid var(--accent); outline-offset: 2px; }
#toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); background: #0c1d16; border: 1px solid #3c6e58; padding: 8px 14px; border-radius: 10px; z-index: 30; font-size: 14px; max-width: 90vw; }

/* 遊びながらわかる UI。卓の向きと牌のSVGはそのまま、PCと縦画面を別々に配置する。 */
:root { --bg: #0b211f; --ink: #f7f1df; --muted: #a0bbb0; --gold: #ffdb76; }
body { background: radial-gradient(ellipse at 50% 25%, #173d35, #0b211f 70%); }
button:focus-visible, summary:focus-visible, [role=button]:focus-visible { outline: 3px solid #7ae6da; outline-offset: 5px; }
#title { padding-top: clamp(28px, 8vh, 72px); max-width: 650px; text-align: center; }
#title h1 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(32px, 5vw, 48px); letter-spacing: .12em; margin: 20px 0 24px; }
#homeTiles { display: flex; justify-content: center; gap: 8px; margin: 32px 0; transform: rotate(-5deg); }
#homeTiles .tile { --w: 62px; }
#homeTiles .tile:last-child { transform: translateY(-12px) rotate(9deg); }
.lead { font-size: 16px; line-height: 1.9; color: #c4d3c7; }
#home { max-width: 430px; margin: 24px auto; }
.btn.gold { background: linear-gradient(140deg, #ffe9a6, #eab850); box-shadow: 0 4px 0 #9a732b, 0 10px 22px #0003; }
.btn.big { border-radius: 16px; padding: 18px 22px; }
.btn.ghost { background: #16392e99; border-color: #3b6153; }
.foot { margin-top: 28px; }

#game { max-width: 1480px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; grid-template-rows: 54px minmax(0, 1fr); gap: 16px 24px; padding: 12px 28px 24px; }
#bar { grid-column: 1 / -1; border-bottom: 1px solid #365347; padding-bottom: 12px; font-size: 14px; }
.gameBrand { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 23px; letter-spacing: .1em; font-weight: 800; margin-right: 16px; }
#doraBox { background: #091a17; border: 1px solid #345046; padding: 4px 10px; }
#doraBox .tile { --w: 20px; }
#soundBtn { margin-left: auto; }
.toolBtn { border: 1px solid #46675b; border-radius: 9px; background: #16372e; padding: 7px 10px; font-size: 12px; }
#bar .icon:first-of-type { margin-left: 0; }
.icon { width: 34px; height: 34px; background: #16372e; }
#arena { min-width: 0; min-height: 0; display: flex; flex-direction: column; --hw: min(calc((100vw - 420px) / 15.7), 60px); }
#stageWrap { min-height: 0; flex: 1; margin: 6px 0 16px; }
#stage { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%) scale(var(--s, .7)) perspective(950px) rotateX(24deg); transform-origin: 50% 50%; }
.felt { border-radius: 30px; background: radial-gradient(ellipse at 40% 75%, #3c8566, #256148 50%, #153e30 100%); box-shadow: inset 0 0 0 7px #a48150, inset 0 0 0 10px #493924, inset 0 12px 28px #001b2366, inset 0 -10px 22px #c0d78b12, 0 5px 0 #7c5c38, 0 11px 0 #3c2c1d, 0 14px 0 #241b14, 0 24px 38px #0008; }
.felt::after { content: ''; position: absolute; inset: 12px; border: 1px solid #d2ac6d30; border-radius: 18px; pointer-events: none; }
#center { background: linear-gradient(140deg, #142b23, #071510); box-shadow: 0 0 0 3px #d9b67444, 0 8px 20px #0005; }
#mine { background: linear-gradient(180deg, #173c32, #112d26); border: 1px solid #3a5f4e; padding: 12px 16px 14px; border-radius: 18px; box-shadow: 0 12px 30px #0003; }
#mine.turn { border-color: #a2ae68; }
#meLine { margin-bottom: 10px; font-size: 13px; }
.handLabel { margin-left: auto; color: #b5cbbf; font-size: 11px; letter-spacing: .08em; }
#handRow { justify-content: center; }
#hand { padding-top: 12px; }
#hand .tile { transition: transform .16s ease-out; }
#hand .tile.sel { transform: translateY(-24%); outline: 3px solid #a8f2df; outline-offset: 1px; }
#hand .tile.glow::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-top: 7px solid var(--gold); top: -22px; left: calc(50% - 5px); }
#mine.turn #hand { filter: none; }
#guideRail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 6px 4px 4px; }
.coachCard { padding: 22px 20px 18px; background: linear-gradient(150deg, #f7f2e4, #e8debd); color: #193c30; border-radius: 20px; box-shadow: 0 8px 24px #0003; }
.railEyebrow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #527366; font-weight: 700; letter-spacing: .1em; }
.liveDot { width: 8px; height: 8px; border-radius: 50%; background: #a3b4a8; }
#guideRail.active .liveDot { background: #258b62; box-shadow: 0 0 0 4px #258b621c; }
#intent { font-size: 23px; line-height: 1.5; margin: 18px 0 8px; letter-spacing: -.03em; }
#coach { padding: 0; min-height: 30px; background: none; font-size: 13px; color: #456658; line-height: 1.6; border-radius: 0; }
#coach .coachOff { color: #6a8172; }
#coach.hidden { visibility: hidden; }
#selectionHint { font-size: 11px; color: #567666; min-height: 18px; margin: 12px 0 10px; }
#actions { padding: 0 12px 12px; flex: none; flex-wrap: wrap; min-height: 0; gap: 10px; justify-content: flex-end; }
#actions:empty { display: none; }
.act { flex: 0 1 190px; min-width: 110px; font-size: 22px; padding: 13px 18px; background: #d3dfd1; color: #234c38; border-radius: 12px; line-height: 1.25; border: 1px solid #e9efca88; }
.act small { display: block; margin-top: 5px; font-size: 10px; font-weight: 500; }
.act[data-a=tsumo], .act[data-a=ron], .act[data-a=riichi], .act[data-a=next], .act[data-a=again] { color: #482c04; background: linear-gradient(140deg, #ffe4a0, #eebf57); box-shadow: 0 3px 0 #b18230; }
.act[data-a=skip] { color: #315445; background: #ced8c8; }
.act:disabled { opacity: .5; cursor: default; }
#progressCard { background: #15352c; border: 1px solid #45604b; border-radius: 16px; padding: 18px; }
.progressTop { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 11px; color: var(--muted); }
#shanten { margin-left: 0; font-size: 15px; padding: 5px 8px; border: 1px solid #bba25260; border-radius: 8px; background: #282f20; white-space: nowrap; }
#shanten::after { content: ' ?'; font-size: 10px; color: #aabbaa; }
#progressFeedback { margin-top: 13px; font-size: 12px; color: #c2d4c5; display: flex; flex-direction: column; gap: 5px; }
#progressFeedback b { font-size: 18px; color: var(--gold); }
#progressFeedback span { line-height: 1.5; }
#progressCard.tenpai { border-color: #ddbd66; background: linear-gradient(140deg, #334225, #193b2d); }
#shantenHelp { margin-bottom: 0; color: #c9d8cd; font-size: 12px; line-height: 1.8; border-top: 1px solid #46634f; padding-top: 10px; }
.discoveryCard { border: 1px solid #365546; border-radius: 14px; padding: 16px; color: #c6d7ca; font-size: 12px; }
.discoveryCard summary { cursor: pointer; font-weight: 700; }
.discoveryCard p { line-height: 1.7; margin-bottom: 0; }
#shapeExamples { display: flex; gap: 20px; margin-top: 20px; }
#shapeExamples > div { flex: 1; text-align: center; }
#shapeExamples span { display: flex; justify-content: center; gap: 2px; }
#shapeExamples .tile { --w: 24px; }
#shapeExamples b { display: block; margin-top: 6px; font-size: 11px; }
.railFoot { font-size: 11px; color: #8caa9b; text-align: center; margin: 0; }
#milestone { position: fixed; left: 50%; top: 40%; z-index: 17; transform: translate(-50%, -50%); width: max-content; max-width: calc(100vw - 32px); padding: 22px 36px; border-radius: 22px; border: 1px solid #ffe6a6; background: linear-gradient(130deg, #ffefbd, #ebc66e); color: #46310e; text-align: center; box-shadow: 0 0 0 6px #ffe7a516, 0 16px 50px #0006; pointer-events: none; }
#milestone b { display: block; font-size: clamp(23px, 3vw, 38px); }
#milestone small { display: block; margin-top: 8px; font-size: 14px; }
.milestoneIcon { font-size: 26px; }
#milestone.victory { padding: 30px 42px; background: radial-gradient(ellipse at top, #fff0bd, #eab94c); }
.spark { position: fixed; left: var(--x); top: 30%; width: 8px; height: 12px; border-radius: 2px; background: #ffe69d; animation: celebrate 1.6s var(--delay) ease-out both; }
.spark:nth-child(3n) { background: #9ed7be; }
@keyframes celebrate { from { opacity: 0; transform: translateY(-70px) rotate(0); } 15% { opacity: 1; } to { opacity: 0; transform: translate(var(--drift), 380px) rotate(300deg); } }

#banner { left: 5%; right: 350px; top: 86px; bottom: 24px; padding: 24px; background: linear-gradient(155deg, #183b2feF, #0b211ffA); border: 1px solid #628366; border-radius: 24px; box-shadow: 0 20px 80px #0008; }
#banner.won { border-color: #cfb065; }
.resultHero { text-align: center; padding: 12px 0 20px; }
.resultHero > span { letter-spacing: .22em; font-size: 10px; color: #b5cbbb; }
.resultHero h3 { font-size: clamp(23px, 3vw, 40px); margin: 16px 0 12px; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.won .resultHero h3 { color: #ffdf8d; text-shadow: 0 2px 18px #edbf5355; }
.resultHero strong { font-size: 44px; color: var(--gold); }
.resultHero strong small { font-size: 16px; margin-left: 8px; }
.resultDiscovery { padding: 18px; background: #f5eed8; color: #254d38; border-radius: 14px; margin-bottom: 18px; }
.resultDiscovery small, .winningShape > small { display: block; font-size: 11px; margin-bottom: 10px; }
.resultDiscovery b { font-size: 17px; }
#resultDetails { border-top: 1px solid #45664f; padding-top: 14px; }
#resultDetails summary { color: #baccbe; font-size: 13px; cursor: pointer; margin-bottom: 14px; }
.winningShape { margin: 20px 0; }
.shapeGroups { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.shapeGroup { display: flex; gap: 2px; padding: 8px 6px; border-bottom: 2px solid #e0bc66; background: #2b4f3b; border-radius: 8px; }
.shapeGroup .tile { --w: clamp(20px, 2.5vw, 36px); }
.resultContinue { position: sticky; bottom: -24px; background: linear-gradient(0deg, #102a21 75%, #102a2100); padding: 22px 0 8px; }
.resultContinue button { width: 100%; display: flex; justify-content: space-between; padding: 16px 20px; font-size: 18px; }

@media (max-width: 899px) {
  #game { --W: min(100vw, 560px); max-width: 560px; display: flex; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  #bar { flex: none; min-height: 40px; gap: 7px; padding-bottom: 8px; font-size: 12px; }
  .gameBrand { font-size: 16px; margin-right: 0; letter-spacing: .02em; }
  #doraBox { padding: 3px 6px; }
  #doraBox small { display: none; }
  #doraBox .tile { --w: 17px; }
  #soundBtn { padding: 6px; font-size: 10px; }
  .icon { width: 29px; height: 29px; }
  #arena { --hw: min(calc((var(--W) - 44px) / 14.7), 35px); flex: 1; }
  #stageWrap { margin: 2px 0 14px; }
  #mine { border-radius: 13px; padding: 8px 4px 10px; }
  #meLine { font-size: 11px; margin-bottom: 4px; }
  .handLabel { font-size: 10px; }
  #hand { padding-top: 8px; }
  #hand .tile.glow::after { top: -16px; border-top-width: 5px; }
  #guideRail { flex: none; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; overflow: visible; }
  .coachCard { padding: 10px 13px; border-radius: 14px; }
  .railEyebrow { font-size: 10px; }
  #intent { font-size: 17px; margin: 5px 0 2px; }
  #coach { min-height: 0; font-size: 11px; }
  #coach .coachOff { width: 20px; height: 20px; }
  #selectionHint { font-size: 10px; margin: 4px 0 0; min-height: 0; }
  #actions:empty { display: none; }
  #actions:not(:empty) { margin: 0; padding: 0 4px 10px; }
  .act { flex: 1 1 80px; min-width: 0; font-size: 19px; padding: 10px; }
  .act small { font-size: 9px; }
  #progressCard { border-radius: 12px; padding: 9px 12px; }
  #shanten { font-size: 13px; padding: 3px 6px; }
  #progressFeedback { margin-top: 5px; flex-direction: row; align-items: center; gap: 8px; font-size: 10px; }
  #progressFeedback b { font-size: 12px; }
  #shapeGuide, .railFoot { display: none; }
  #banner { left: 8px; right: 8px; top: 62px; bottom: 12px; padding: 18px; border-radius: 18px; z-index: 10; }
  .resultHero { padding: 8px 0 12px; }
  .resultHero strong { font-size: 38px; }
  .resultDiscovery { padding: 14px; }
  .resultDiscovery b { font-size: 15px; }
  .shapeGroups { gap: 7px; }
  .shapeGroup { padding: 6px 4px; }
  .shapeGroup .tile { --w: 22px; }
  .resultContinue { bottom: -18px; }
}
@media (max-width: 360px) { .gameBrand { display: none; } #game { padding-left: 8px; padding-right: 8px; gap: 7px; } }
@media (max-height: 650px) and (max-width: 899px) {
  #game { gap: 6px; padding-top: 4px; padding-bottom: 6px; }
  #intent { font-size: 15px; margin: 3px 0 0; }
  .coachCard { padding: 7px 10px; }
  #stageWrap { margin-bottom: 8px; }
  #mine { padding-top: 5px; padding-bottom: 7px; }
  #progressCard { padding: 6px 10px; }
  #progressFeedback { margin-top: 3px; }
  #selectionHint { margin-top: 2px; }
  .act { padding: 7px; }
}
@media (min-width: 900px) and (max-height: 740px) {
  #game { gap: 10px 20px; padding: 10px 24px 14px; grid-template-rows: 46px minmax(0,1fr); }
  #guideRail { gap: 12px; }
  .coachCard { padding: 16px; }
  #intent { font-size: 21px; margin-top: 12px; }
  #progressCard { padding: 14px; }
  #mine { padding-top: 8px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 牌は面と側面を持つ箱。卓の上では同じ厚み、相手の手は箱ごと垂直に立てる。 */
#stage, .side, .river, .orow, .melds, .meld { transform-style: preserve-3d; }
.tile { --thickness: calc(var(--w) * .42); transform-style: preserve-3d; background: #236348; box-shadow: 0 3px 6px #00150d66; }
.tileFace { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(145deg, #fffdf2, #eee5d0); transform: translateZ(var(--thickness)); box-shadow: inset 0 0 0 1px #63543a22, inset 1px 1px 1px #fff9; transform-style: preserve-3d; }
.tileEdges { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.tileEdges > i { position: absolute; display: block; background: linear-gradient(to bottom, #eae0c5 0%, #e2d4b5 62%, #287451 64%, #184b35 100%); }
.edgeFront, .edgeBack { left: 0; width: 100%; height: var(--thickness); }
.edgeFront { bottom: 0; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.edgeBack { top: 0; transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(to top, #eae0c5, #e2d4b5 62%, #287451 64%, #184b35) !important; }
.edgeLeft, .edgeRight { top: 0; height: 100%; width: var(--thickness); }
.edgeLeft { left: 0; transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(to right, #184b35, #287451 36%, #e2d4b5 38%, #eae0c5) !important; }
.edgeRight { right: 0; transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(to left, #184b35, #287451 36%, #e2d4b5 38%, #eae0c5) !important; }
.tile.back .tileFace { background: linear-gradient(145deg, #3f9c70, #216447); }
.side .orow { top: 448px; height: 0; align-items: flex-start; }
.side .orow > .tile.back { height: calc(var(--w) * 1.33); margin: calc(var(--w) * -1.33) 0 0; border-radius: 3px; background: #2b8059; box-shadow: none; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.side .orow > .tile.back.drawn { margin-left: 8px; }
.side .orow > .tile.back .tileFace { background: linear-gradient(145deg, #fff8e6, #e0d4b7); }
.side .orow > .tile.back .tileEdges > i { background: linear-gradient(to bottom, #f5edda, #dfd2b5 58%, #2a7956 60%, #1b513a); }
.side .orow .open, .side .orow .melds { margin-top: -26px; }
.tile.sideways { transform: translateY(calc(var(--w) * .165)) rotate(90deg); }
/* 自分の手牌は読める正面向き。背の層と厚みを控えめに重ねる。 */
#hand .tile, #homeTiles .tile, #banner .tile, #shapeExamples .tile, #dora .tile, #fx .tile { transform-style: flat; }
#hand .tileFace, #homeTiles .tileFace, #banner .tileFace, #shapeExamples .tileFace, #dora .tileFace, #fx .tileFace { transform: none; }
#hand .tileEdges, #homeTiles .tileEdges, #banner .tileEdges, #shapeExamples .tileEdges, #dora .tileEdges, #fx .tileEdges { display: none; }
#hand .tile { box-shadow: inset 0 0 0 1px #7a683122, 0 -3px 0 #f5ead2, 0 -8px 0 #307c55, 0 3px 0 #d2c39f, 0 6px 8px #0005; }

/* 操作の出入りで卓をリサイズしない。ボタン・手牌・ツモ位置の領域を常に確保する。 */
#actions, #actions:empty { display: flex; height: 84px; min-height: 84px; flex-wrap: nowrap; align-items: center; padding: 0 12px 12px; }
.act { height: 64px; min-width: 0; flex: 0 1 190px; padding: 10px 12px; }
#handRow { justify-content: flex-start; }
#hand { flex: 1; min-width: 0; position: relative; height: calc(var(--hw) * 1.65 + 12px); min-height: calc(var(--hw) * 1.65 + 12px); padding-right: calc(var(--hw) * 1.7); }
.concealedHand { display: flex; flex: none; align-items: flex-end; gap: 1px; }
.drawSlot { position: absolute; right: 0; bottom: 0; width: var(--hw); height: calc(var(--hw) * 1.33); }
#hand .drawSlot .tile { margin: 0; }
#hand .tile.drawn { margin-left: 0; }
#meLine { height: 20px; white-space: nowrap; }
#meHead { overflow: hidden; text-overflow: ellipsis; }
.coachCard { display: grid; grid-template-rows: 18px 70px 44px 30px; gap: 8px; padding: 18px; }
#intent { margin: 0; align-self: center; }
#coach { align-self: start; }
#selectionHint { margin: 0; line-height: 1.4; }
#progressCard { position: relative; min-height: 124px; }
#progressFeedback { min-height: 44px; }
#shantenHelp { position: absolute; right: 0; left: 0; top: 100%; z-index: 21; margin: 8px 0 0; padding: 12px; border: 1px solid #68856e; border-radius: 10px; background: #17392e; box-shadow: 0 8px 18px #0005; }
#mine { flex: none; }
#mine.turn { border-color: #c5bb6c; }
@media (max-width:899px) {
  #actions, #actions:empty, #actions:not(:empty) { height: 64px; min-height: 64px; padding: 0 4px 10px; margin: 0; }
  .act { flex: 1 1 0; height: 52px; padding: 8px 3px; font-size: 17px; }
  .act small { font-size: 8px; }
  .coachCard { padding: 10px 12px; grid-template-rows: 12px 26px 34px 26px; gap: 2px; }
  #intent { font-size: 16px; margin: 0; }
  #selectionHint { font-size: 10px; }
  #progressCard { min-height: 66px; }
  #progressFeedback { min-height: 17px; }
  #hand { height: calc(var(--hw) * 1.65 + 8px); min-height: calc(var(--hw) * 1.65 + 8px); }
}
@media (max-height:650px) and (max-width:899px) {
  .coachCard { padding: 7px 10px; grid-template-rows: 12px 23px 30px 20px; }
  #intent { font-size: 15px; }
  #actions, #actions:empty, #actions:not(:empty) { height: 58px; min-height: 58px; padding-bottom: 8px; }
  .act { height: 48px; }
}
.side .orow > .tile.back .tileFace { background: linear-gradient(135deg, #38885f, #236344); box-shadow: inset 0 0 0 1px #173c2e55, inset 1px 0 0 #91bda033; }
.side .tile.last { outline: none; }
.side .tile.last .tileFace { outline: 2px solid #74d8c5; outline-offset: 1px; }
#progressCard { height: 144px; }
#progressFeedback { height: 52px; }
@media (max-width:899px) { #progressCard { height: 80px; } #progressFeedback { height: 18px; } }
@media (max-height:650px) and (max-width:899px) { #progressCard { height: 76px; } }
/* 相手の牌も引くたびに全体を中央寄せし直さない。ツモの1枚は独立した場所に置く。 */
.side .orow { left: 78px; width: 324px; justify-content: flex-start; gap: 0; }
.opponentHand, .opponentDraw { display: flex; flex: none; align-items: flex-start; transform-style: preserve-3d; gap: 1px; }
.opponentDraw { width: 29px; padding-left: 8px; }
.side[data-pos="1"] .orow { flex-direction: row; }
.side[data-pos="1"] .opponentHand { flex-direction: row-reverse; }
.side .orow .tile.back { height: calc(var(--w) * 1.33); margin: calc(var(--w) * -1.33) 0 0; border-radius: 3px; background: #2b8059; box-shadow: none; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.side .orow .tile.back.drawn { margin-left: 0; }
.side .orow .tile.back .tileFace { background: linear-gradient(135deg, #38885f, #236344); box-shadow: inset 0 0 0 1px #173c2e55, inset 1px 0 0 #91bda033; }
.side.deal .orow .tile.back { animation: standingDeal .32s ease-out backwards; }
@keyframes standingDeal { from { opacity: 0; } }
/* 名札やリーチ印の長さでも周りの位置が変わらない。 */
.plate { width: 140px; }
#meHead { flex: 1; min-width: 0; }
.handLabel { flex: none; }
.cl[data-pos="0"], .cl[data-pos="2"] { width: 94px; }
.cl[data-pos="1"], .cl[data-pos="3"] { width: 48px; }
#progressCard[hidden] { display: block !important; visibility: hidden; }
@media (min-width:900px) { #shapeGuide[hidden] { display: block !important; visibility: hidden; } }
#handRow { position: relative; }
#myMelds { position: absolute; right: calc(var(--hw) * 1.6); bottom: 0; gap: 2px; }
#myMelds .tile { --w: calc(var(--hw) * .66); }
#stage { transform: translate(-50%, -50%) scale(var(--s, .7)) perspective(950px) rotateX(32deg); }
#round, #roundMini, #sticks { font-variant-numeric: tabular-nums; }
.plate[data-pos="2"] { top: 54px; }
#fx .tile { box-shadow: 0 3px 0 #d2c19c, 0 6px 0 #246348, 0 9px 14px #0005; }
.callout { color: #fff0c5; -webkit-text-stroke: .6px #143726; text-shadow: 0 2px 0 #715024, 0 0 14px #a7dfad55; }
#shanten { width: 126px; flex: none; font-variant-numeric: tabular-nums; }
@media (max-width:899px) { #shanten { width: 105px; } #progressFeedback b { flex: none; width: 112px; } }
#shanten { position: relative; text-align: left; padding-right: 18px; }
#shanten::after { content: '?'; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); }
@media (max-width:899px) { #progressFeedback > b:only-child { width: 100%; } }

/* 捨て牌の厚みは作者の指定で従来の2倍。表面と4側面が同じ寸法を参照する。 */
.side .river .tile { --thickness: calc(var(--w) * .84); }
.callout.attention { color: #ffe1a4; text-shadow: 0 3px 0 #754118, 0 0 24px #f9bc6280; font-size: 25px; }
.callout.reach { color: #ffe7a8; text-shadow: 0 3px 0 #685028, 0 0 22px #f6d16a66; }

/* 受け渡しを言葉でも残す。高さを確保し、実況で卓を動かさない。 */
#center .cl span { display: inline-block; }
.pointFlight { position: fixed; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff0bd; font-size: 15px; white-space: nowrap; text-shadow: 0 2px 4px #000; }
.pointFlight i { display: block; width: 56px; height: 7px; border-radius: 3px; background: #fffae9; box-shadow: 0 2px 5px #0006; }
.pointFlight i::after { content: ''; display: block; width: 5px; height: 5px; margin: 1px auto; border-radius: 50%; background: #c73124; }
.transferList { padding: 0; margin: 14px 0; list-style: none; display: grid; gap: 6px; }
.transferList li { padding: 8px 10px; border-radius: 8px; background: #ffffff0b; font-size: 13px; }
.transferList b { color: #efd38b; margin: 0 5px; }
.transferList strong { float: right; color: #ffe5a2; margin-left: 8px; }

/* 麻雀の判断を1行で読む。卓と操作領域を優先する。 */
#game { max-width: 1600px; grid-template-columns: minmax(0, 1fr) 270px; gap: 10px 16px; padding: 8px 16px 14px; }
#guideBtn { margin-left: auto; }
.coachCard { display: flex; flex-direction: column; padding: 14px; gap: 10px; }
#coach { color: #193c30; font-size: 14px; line-height: 1.6; min-height: 24px; }
#coach [data-coach] { display: block; }
#stageWrap { margin: 0 0 8px; }
#center { left: 140px; top: 140px; width: 200px; height: 200px; }
.cround { top: 75px; }
.cwall { top: 115px; }
.cl { padding: 3px 4px; }
.cl[data-pos="0"], .cl[data-pos="2"] { width: 108px; }
.cl[data-pos="1"], .cl[data-pos="3"] { width: 58px; display: block; }
.cl[data-pos="1"] { right: 2px; }
.cl[data-pos="3"] { left: 2px; }
.seatNick { display: block; width: 100%; font-size: 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #bbd3c6; }
.cl.turn .seatNick { color: #2b2200; }
.cl[data-pos="1"] b, .cl[data-pos="3"] b { display: block; margin: 1px 0; }
.cl[data-pos="0"] { bottom: 4px; }
.cl[data-pos="2"] { top: 4px; }
.stick[data-pos="0"], .stick[data-pos="2"] { left: 72px; }
.stick[data-pos="0"] { bottom: 40px; }
.stick[data-pos="2"] { top: 40px; }
.stick[data-pos="1"] { top: 18px; right: 24px; }
.stick[data-pos="3"] { bottom: 18px; left: 24px; }
/* 河と同じ厚みを手牌・鳴いた牌にも適用する。 */
.tile { --thickness: calc(var(--w) * .84); }
#hand .tile, #myMelds .tile { transform-style: preserve-3d; transform: rotateX(24deg); box-shadow: 0 3px 6px #00150d66; }
#hand .tile.sel { transform: translateY(-24%) rotateX(24deg); }
#myMelds .tile.sideways { transform: rotateX(24deg) translateY(calc(var(--w) * .165)) rotateZ(90deg); }
#hand .tileFace, #myMelds .tileFace { transform: translateZ(var(--thickness)); }
#hand .tileEdges, #myMelds .tileEdges { display: block; }
#hand { padding-top: calc(var(--hw) * .5); height: calc(var(--hw) * 1.95 + 12px); min-height: calc(var(--hw) * 1.95 + 12px); }
#hand .tile { margin-top: 0; }
#myMelds { bottom: 6px; }
#fx .tileFlight { position: fixed; left: 0; top: 0; transform-style: preserve-3d; }
#fx .flightProjection { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
#fx .tileFlight .tile { position: absolute; transform-style: preserve-3d; margin: 0; box-shadow: 0 3px 6px #00150d66; }
#fx .tileFlight .tileFace { transform: translateZ(var(--thickness)); }
#fx .tileFlight .tileEdges { display: block; }
@media (max-width:899px) {
  #game { max-width: 899px; --W: min(100vw, 899px); padding: max(6px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); gap: 6px; }
  #arena { --hw: min(calc((var(--W) - 32px) / 14.7), 42px); }
  .coachCard { padding: 8px 12px; gap: 4px; }
  #coach { font-size: 12px; min-height: 20px; }
  #guideRail { gap: 6px; }
  #hand { height: calc(var(--hw) * 1.95 + 8px); min-height: calc(var(--hw) * 1.95 + 8px); }
}
@media (max-width:899px) and (max-height:500px) and (orientation:landscape) {
  #game { display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: 36px minmax(0, 1fr); }
  #bar { grid-column: 1 / -1; }
  #arena { --hw: min(calc((100vw - 278px) / 14.7), 26px); }
  #guideRail { display: flex; min-height: 0; overflow-y: auto; }
  #actions, #actions:empty, #actions:not(:empty) { height: 44px; min-height: 44px; padding-bottom: 4px; }
  .act { height: 36px; font-size: 13px; padding: 4px; }
  .act small { display: none; }
}
/* filterを箱本体に掛けるとブラウザが3D面を平面化するため、強調は枠で行う。 */
.tile.glow { filter: none; animation: tileHighlight 1.2s ease-in-out infinite; }
@keyframes tileHighlight { 50% { outline-color: #fff1a5; } }
#hand .tile.dim { filter: none; }
#hand .tile.dim .tileFace { filter: brightness(.65); }
#myMelds .tile { --w: var(--meldw, calc(var(--hw) * .66)); }
.seatNick { font-size: 12px; }
/* 中央の液晶と河はそれぞれ独立した領域に収める。宣言牌も6列を保つ。 */
#center { left: 162px; top: 162px; width: 156px; height: 156px; }
.cl[data-pos="0"], .cl[data-pos="2"] { width: 100px; }
.cl[data-pos="1"], .cl[data-pos="3"] { width: 52px; }
.cround { top: 57px; left: 52px; right: 52px; font-size: 13px; }
.cwall { top: 97px; left: 40px; right: 40px; font-size: 10px; }
.cwall b { font-size: 12px; }
#sticks { font-size: 9px; white-space: nowrap; }
.stick[data-pos="0"], .stick[data-pos="2"] { left: 50px; width: 56px; }
.stick[data-pos="0"] { bottom: 41px; }
.stick[data-pos="2"] { top: 41px; }
.stick[data-pos="1"] { right: 17px; top: 9px; height: 28px; }
.stick[data-pos="3"] { left: 17px; bottom: 9px; height: 28px; }
.side .river { left: 150px; top: 338px; width: 180px; display: grid; grid-template-columns: repeat(6, 30px); grid-auto-rows: 38px; justify-items: center; align-items: start; gap: 0; }
.side .river .tile.sideways { margin: 0; }
#shanten { width: auto; position: static; padding: 0; color: #ffe4a0; font-size: 13px; font-weight: 700; text-align: right; }
#shanten::after { content: none; }
#banner { left: 16px; right: 302px; top: 72px; bottom: 14px; }
.resultHeading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.resultHeading small { color: #aec6b8; font-size: 12px; }
.resultHeading h2 { margin: 0; color: #ffe3a0; font-size: 26px; }
.winningCard { padding: 16px; border: 1px solid #577360; border-radius: 14px; background: #ffffff06; margin-bottom: 16px; }
.winningCard h3 { margin: 0 0 12px; font-size: 16px; }
.roleCards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.roleCards li { border-radius: 10px; padding: 12px; background: #f2ead1; color: #204834; }
.roleCards li > div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.roleCards b { font-size: 18px; }
.roleCards span { font-size: 12px; white-space: nowrap; }
.roleCards p { font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.bonusYaku { font-size: 12px; color: #bbcbbf; }
.winningShape { margin: 16px 0 0; }
.shapeGroups { gap: 6px; }
.shapeGroup { padding: 7px 4px; gap: 1px; }
.shapeGroup .tile { --w: clamp(18px, 2.5vw, 28px); }
#resultSettlement { padding: 14px; border-radius: 14px; background: #0c241d; margin: 14px 0; }
#resultSettlement h3 { margin: 0 0 12px; font-size: 15px; }
.balanceRows { display: grid; gap: 7px; font-size: 13px; }
.balanceRows > div { display: grid; grid-template-columns: minmax(0, 1fr) 80px 58px; gap: 6px; }
.balanceRows span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balanceRows b, .balanceRows small { text-align: right; font-variant-numeric: tabular-nums; }
.balanceRows small { color: #adc6b7; }
.resultTransfers { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.resultTransfers li { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); align-items: center; gap: 8px; border-radius: 8px; padding: 10px 8px; border: 1px solid #375345; font-size: 12px; transition: background .25s, border-color .25s; }
.resultTransfers li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultTransfers li > span:last-child { text-align: right; }
.resultTransfers .paying { background: #66562a44; border-color: #d5b369; }
.resultTransfers .settled { border-color: #658466; }
.paymentPath { position: relative; padding-bottom: 10px; text-align: center; }
.paymentPath::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: #7b947f; }
.paymentPath i { position: absolute; left: 0; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: #efd48a; opacity: 0; }
.paying .paymentPath i { opacity: 1; }
@media (max-width:899px) {
  #game { padding-left: 4px; padding-right: 4px; gap: 4px; }
  #stageWrap { margin-bottom: 4px; }
  #shanten { font-size: 12px; }
  #banner { left: 4px; right: 4px; top: 52px; bottom: 6px; padding: 12px; }
  .winningCard { padding: 10px; }
  .roleCards { grid-template-columns: 1fr; }
  .roleCards li { padding: 10px 12px; }
  .resultContinue { bottom: -12px; padding-top: 12px; }
  #resultSettlement { padding: 10px; }
  .resultTransfers li { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 4px; padding: 10px 4px; }
}

/* 縦画面は卓の実際の縦横比で領域を確保し、卓と操作欄の間を空けない。 */
@media (max-width:899px) {
  #arena { flex: none; }
  #stageWrap { flex: none; height: min(calc((100vw - 12px) * .84), calc(100dvh - 245px)); }
}
@media (max-width:899px) and (max-height:500px) and (orientation:landscape) {
  #arena { flex: 1; }
  #stageWrap { flex: 1; height: auto; }
}

/* おすすめの光と、学習用の印は別にする。 */
#learningFacts { font-size: 12px; padding: 5px 8px; }
#learningFacts[hidden] { display: none; }
#learningFacts > small { display: block; opacity: .85; }
.factRow { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 29px; }
.factRow b { font-size: 11px; overflow-wrap: anywhere; }
.factTiles { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.factTile { display: inline-block; width: 19px; height: 25px; background: #fff8e4; border-radius: 3px; }
.factTile svg { width: 100%; height: 100%; }
.scoreReason { font-weight: bold; }

/* 初めての昼休み：読み物を減らし、牌の見本を中心に。 */
#title { padding-top: clamp(20px, 4vh, 40px); }
#title h1 { margin: 16px 0; }
#homeTiles { margin: 22px 0; }
#home { margin: 20px auto; gap: 10px; }
#home .btn.big { padding: 15px 20px; }
#playBtn { min-height: 76px; }
#home .btn.big small { opacity: 1; }
#resumeBtn { order: 0; }
#playBtn { order: 1; }
#publicBtn { order: 2; }
#friendsBtn { order: 3; }
.foot { color: #a0bbb0; margin-top: 20px; }
#meLine { margin-bottom: 3px; }
#mine { padding-top: 8px; padding-bottom: 10px; }
#bar .icon { min-width: 38px; width: 38px; height: 38px; }
#learningFacts { color: #c9ded0; font-size: 13px; }
.factRow b { font-size: 12px; }
#shapeGuide summary { min-height: 25px; }
@media (min-width:900px) and (max-height:800px) {
  #actions, #actions:empty { height: 68px; min-height: 68px; padding-bottom: 8px; }
  .act { height: 56px; }
  #mine { padding-top: 6px; padding-bottom: 8px; }
  #hand { height: calc(var(--hw) * 1.85 + 8px); min-height: calc(var(--hw) * 1.85 + 8px); }
}
@media (max-width:899px) {
  #game { overflow-y: auto; }
  #mine { padding: 6px 4px 8px; }
  #stageWrap { height: min(calc((100vw - 12px) * .84), max(150px, calc(100dvh - 360px))); }
  #bar { gap: 5px; }
  #bar .icon { min-width: 34px; width: 34px; height: 34px; }
  #coach { font-size: 13px; }
  .railEyebrow { font-size: 11px; }
  .act small { font-size: 10px; }
}
@media (max-width:899px) and (max-height:500px) and (orientation:landscape) {
  #stageWrap { height: auto; min-height: 80px; }
}
/* 操作名と、その結果を一緒に読めるボタン。 */
.act { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; }
.act small { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; }
#shanten { width: auto; max-width: 65%; white-space: normal; text-align: right; }
.bonusFacts summary { padding: 10px 0; cursor: pointer; }
@media (max-width:420px) { #shanten { font-size: 10px; } .act small { font-size: 10px; } }

#bar #soundBtn { width: 46px; font-size: 11px; white-space: nowrap; }

/* 牌の意味と判断に必要な情報だけを、いつも同じ場所へ。 */
#guideRail { gap: 10px; }
.coachCard { padding: 10px 12px; border-radius: 10px; box-shadow: none; gap: 5px; flex-shrink: 0; }
#coach { line-height: 1.5; font-size: 13px; height: 3em; min-height: 3em; flex: none; align-items: flex-start; }
#coach [data-coach] { overflow-wrap: anywhere; }
#learningFacts, #roleFacts { padding: 10px 12px; background: #15382e; border: 1px solid #3b5d4d; border-radius: 10px; }
#learningFacts:empty, #roleFacts:empty { display: none; }
#learningFacts > small { font-size: 11px; line-height: 1.5; }
.factRow { gap: 6px; padding: 3px 0; }
.factTile { width: 22px; height: 29px; }
#roleFacts { color: #dce8df; font-size: 12px; }
#roleFacts h3 { margin: 0 0 8px; font-size: 13px; color: #f7f1df; }
.roleFact { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 7px 0; border-top: 1px solid #355447; }
.roleFact strong { font-size: 13px; color: #f7f1df; }
.roleFact small { font-size: 11px; color: #b7cebf; }
.roleFact.ready strong { color: #ffe1a0; }
/* ドラは牌面の黄、打牌候補は牌の上の青い三角で区別する。 */
.tile.bonusTile > .tileFace { background: linear-gradient(145deg, #fff0a3, #e8bd4d); box-shadow: inset 0 0 0 1px #a57a25, inset 1px 1px 1px #fff8; }
#hand .tile.glow { outline: none; animation: none; filter: none; }
#hand .tile.glow::after { content: none; }
#hand .tile.glow > .tileFace::before { content: ''; position: absolute; left: 50%; top: -15px; width: 0; height: 0; border: 6px solid transparent; border-bottom: 9px solid #68d6ff; border-top: 0; transform: translateX(-50%); filter: drop-shadow(0 1px 2px #001c32); pointer-events: none; }
#hand .tile.sel { outline: 3px solid #a8f2df; }
#shapeGuide { padding: 10px 12px; border-radius: 10px; }
#meLine { height: auto; min-height: 22px; }
#shanten { width: auto; max-width: 70%; white-space: normal; line-height: 1.4; }
.act small { margin-top: 0; }
@media (min-width:900px) {
  #guideRail { scrollbar-width: thin; }
}
@media (max-width:899px) {
  #guideRail { display: flex; flex-direction: column; flex: 1 0 auto; gap: 6px; padding: 0 2px 10px; overflow: visible; }
  #stageWrap { height: min(calc((100vw - 12px) * .84), max(140px, calc(100dvh - 410px))); }
  #learningFacts, #roleFacts { padding: 8px 10px; }
  #roleFacts h3 { margin-bottom: 4px; }
  .roleFact { padding: 5px 0; }
  #mine { border-radius: 10px; box-shadow: none; }
}
@media (max-width:899px) and (max-height:500px) and (orientation:landscape) {
  #stageWrap { height: auto; min-height: 80px; }
  #guideRail { flex: 1; min-height: 0; overflow-y: auto; }
}
.handFact + .handFact { border-top: 1px solid #365346; margin-top: 10px; padding-top: 10px; }
.handFact h3, .scorePreview h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 7px; font-size: 13px; }
.handFact h3 small, .scorePreview h3 small { font-size: 10px; color: #bed0c5; font-weight: 400; }
.handFact > small { display: block; margin-top: 5px; font-size: 11px; color: #bed0c5; }
.safetyFact h3 small { color: #f2b59f; }
.roleFact > b { color: #ead7a7; font-size: 11px; margin-left: auto; }
.roleFact > small { flex-basis: 100%; }
.scorePreview { margin-top: 12px; border-top: 1px solid #365346; padding-top: 10px; }
.scoreRow, .scoreHead { display: grid; grid-template-columns: 36px 1fr 1fr; align-items: center; text-align: right; gap: 8px; }
.scoreHead { color: #b7cebf; font-size: 10px; margin: 5px 0; }
.scoreHead > :first-child { text-align: left; }
.scoreRow { padding-top: 7px; font-size: 12px; }
.scoreRoles { display: block; line-height: 1.6; margin: 3px 0 7px; color: #dce8df; }
.scoreRoles span { display: block; color: #9cb4a6; font-size: 10px; }
.scoreNote { display: block; margin-top: 8px; font-size: 10px; color: #b7cebf; line-height: 1.5; }
@media (max-width:899px) {
  #learningFacts { display: flex; gap: 10px; flex-wrap: wrap; }
  .handFact { flex: 1 1 110px; }
  .handFact + .handFact { border: 0; margin: 0; padding: 0; }
  .safetyFact { flex-basis: 100%; }
}

.scoreRow > div small { display: block; color: #b7cebf; font-size: 10px; font-weight: 400; line-height: 1.5; margin-top: 3px; }
.scoreRow { align-items: start; border-top: 1px solid #365346; padding: 8px 0; }
#learningFacts .factTiles { flex-wrap: wrap; }

@media (max-width:899px) {
  .handFact { min-width: 0; }
  .safetyFact { order: 3; }
}

/* 川は面どうしを詰める。6枚を一段にし、横向きの1枚だけ幅を追加する。 */
.side .river {
  --river-w: 19px;
  left: calc(240px - var(--river-w) * 3.165); top: 328px;
  width: calc(var(--river-w) * 6.33 + .02px);
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
  justify-content: flex-start; gap: 0;
}
.side .river .tile { --w: var(--river-w); margin: 0; flex: none; }
.side .river .tile.sideways {
  margin: 0 calc(var(--river-w) * .165);
  transform: translateY(calc(var(--river-w) * .165)) rotate(90deg);
}
/* 鳴いた組は持ち主の手元側の端へ。最初の組を右端に置き、追加分を左へ並べる。 */
.side .tableMelds {
  position: absolute; left: 78px; right: 24px; top: 434px;
  display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 4px;
  transform-style: preserve-3d;
}
.side .tableMelds .meld { display: flex; flex: none; align-items: flex-end; gap: 0; transform-style: preserve-3d; }
.side .tableMelds .tile { --w: var(--table-meldw, 23px); margin: 0; flex: none; transform-style: preserve-3d; }
.side .tableMelds .tile.sideways {
  margin: 0 calc(var(--w) * .165);
  transform: translateY(calc(var(--w) * .165)) rotate(90deg);
}
.side[data-pos="1"] .tableMelds .meld { flex-direction: row-reverse; }
/* ポンの判断時に、使う手牌2枚をそのまま示す。 */
#hand .tile.ponCandidate { outline: 2px solid #8de1cb; outline-offset: 1px; }
.ponPreview { display: inline-flex; gap: 1px; align-items: center; }
.ponPreview .tile { --w: 13px; --thickness: 3px; pointer-events: none; }
.act:has(.ponPreview) { gap: 1px; }
@media (max-width:899px) and (max-height:500px) and (orientation:landscape) { .ponPreview { display: none; } }

.actMain { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ponPreview .tile { --w: 18px; }

/* 狭い画面で応答が4択ある場合も、操作名を折り返さずに読めるようにする。 */
@media (max-width:420px) {
  #actions:has(.act:nth-child(4)) .ponPreview,
  #actions:has(.act:nth-child(4)) .act small { display: none; }
  #actions:has(.act:nth-child(4)) .actMain { white-space: nowrap; }
}

/* 基本の完成形を、常に同じ14枚の見本で見せる。 */
#title h1 { margin-bottom: 10px; }
#title > .lead { margin: 0; font-size: clamp(13px, 3.6vw, 16px); }
.homeShape { margin: 32px auto 28px; padding: 26px 12px 18px; border: 1px solid #55745a66; border-radius: 20px; background: radial-gradient(ellipse at 50% 25%, #30644955, #12382c66); }
#homeTiles { --home-tile-w: clamp(16px, 4.4vw, 34px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(5px, 1.4vw, 14px); margin: 0; transform: none; }
.homeGroup { min-width: 0; position: relative; padding-bottom: 8px; border-bottom: 2px solid #dfc681; }
.homeGroup.pair { border-color: #91d7c8; }
.homeGroupTiles { display: flex; gap: 1px; }
.homeTile { display: block; animation: homeGather 12s ease-in-out infinite backwards; animation-delay: calc(var(--group) * .65s + var(--tile) * .12s); }
#homeTiles .tile { --w: var(--home-tile-w); display: block; box-shadow: 0 3px 0 #c9b993, 0 6px 0 #246449, 0 8px 8px #0004; }
#homeTiles .tile:last-child { transform: none; }
.homeGroup small { position: absolute; top: calc(var(--home-tile-w) * 1.33 + 17px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: #c1d3c2; font-size: clamp(9px, 1.8vw, 11px); }
.homeGroup.pair small { color: #a9ded1; }
.homeShapeGoal { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 50px 0 10px; font-size: clamp(13px, 3.4vw, 16px); }
.homeShapeGoal b:first-child { color: #f3d68b; }
.homeShapeGoal b:last-child { color: #a9ded1; }
.homeShapeGoal > span { color: #839e8f; }
.homeShapeNote { margin: 0; color: #b8cdbd; font-size: 12px; }
@keyframes homeGather {
  0%, 6% { transform: translate(calc((var(--tile) - 1) * 5px), -10px) rotate(calc((var(--tile) - 1) * 8deg)); }
  16%, 83% { transform: translate(0, 0) rotate(0deg); }
  93%, 100% { transform: translate(calc((var(--tile) - 1) * 5px), -10px) rotate(calc((var(--tile) - 1) * 8deg)); }
}
#title[hidden] .homeTile { animation-play-state: paused; }
@media (max-width: 420px) {
  .homeShape { margin: 26px auto; padding: 24px 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .homeTile { animation: none; transform: none; }
}

/* 友達の部屋: 公開/非公開と、公開で募集中の一覧 */
.listedBadge { display: block; margin-top: 4px; font-style: normal; font-size: 13px; color: #f5d547; }
.listedBadge b { font-size: 1.15em; margin: 0 .1em; }
.visibility { display: flex; gap: 8px; border: 0; padding: 0; margin: 12px 0 0; }
.visibility label { flex: 1; cursor: pointer; }
.visibility input { position: absolute; opacity: 0; pointer-events: none; }
.visibility span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; border: 1px solid #3c6e58; background: #0c1d16; color: var(--ink); font-weight: 700; }
.visibility small { display: block; font-weight: 400; font-size: 12px; opacity: .75; }
.visibility input:checked + span { border-color: #f5d547; box-shadow: 0 0 0 1px #f5d547 inset; }
.visibility input:focus-visible + span { outline: 2px solid #9fe5e3; outline-offset: 2px; }
#listedRooms h3 { margin: 20px 0 8px; font-size: 15px; color: #f5d547; }
#listedList { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.listedRoom { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; border: 1px solid #3c6e58; background: #0c1d16; color: var(--ink); font: inherit; cursor: pointer; }
.listedRoom b { font-size: 22px; letter-spacing: .15em; }
.listedRoom span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }