:root { --felt: #1f5a3d; --felt2: #174730; --ink: #f4efe0; --tile-w: 62px; --tile-h: 86px; --small-w: 34px; --small-h: 47px; --accent: #e9c46a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--felt); color: var(--ink); font-family: "PingFang TC", "Heiti TC", "Noto Sans CJK TC", -apple-system, "Helvetica Neue", sans-serif; font-size: 22px; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
.hidden { display: none !important; }
.screen { min-height: 100%; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
small { font-size: 0.6em; opacity: 0.8; font-weight: 400; }
button { font: inherit; color: var(--ink); background: #2d7a55; border: 2px solid #9fd3b4; border-radius: 14px; padding: 10px 20px; cursor: pointer; }
button:active { transform: scale(0.97); }
button.big { font-size: 28px; padding: 16px 28px; min-width: 180px; }
button.primary { background: #c0392b; border-color: #f6c7c0; }
button.small { font-size: 18px; padding: 6px 12px; }
button small { display: block; }
/* setup */
#setup { padding: 24px; max-width: 1100px; margin: 0 auto; }
#setup h1 { margin: 0 0 8px; font-size: 40px; }
.hint { margin: 0 0 16px; } .hint span { display: block; font-size: 18px; opacity: 0.85; }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.seat { background: var(--felt2); border-radius: 16px; padding: 12px; text-align: center; }
.seat .wind { font-size: 18px; opacity: 0.8; }
.seat .avatar { width: 120px; height: 120px; border-radius: 50%; background: #3b8a63; margin: 8px auto; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 48px; border: 4px solid #9fd3b4; }
.seat .avatar img { width: 100%; height: 100%; object-fit: cover; }
.seat input[type=text] { width: 100%; font: inherit; font-size: 24px; padding: 8px; border-radius: 10px; border: 2px solid #9fd3b4; background: #fbf7ec; color: #111; text-align: center; }
.seat label.photo { display: inline-block; margin-top: 8px; font-size: 18px; background: #2d7a55; border: 2px solid #9fd3b4; border-radius: 10px; padding: 6px 12px; }
.seat label.photo input { display: none; }
.seat .kind { font-size: 16px; opacity: 0.8; margin-top: 6px; }
.options { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 18px; font-size: 20px; }
.options input[type=number] { width: 90px; font: inherit; font-size: 22px; padding: 6px; border-radius: 8px; border: 2px solid #9fd3b4; background: #fbf7ec; color: #111; }
.options input[type=checkbox] { width: 26px; height: 26px; vertical-align: middle; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
/* table */
#table { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 6px; gap: 4px; }
.top { display: flex; align-items: flex-start; gap: 10px; min-height: 150px; }
.middle { flex: 1; display: flex; gap: 8px; min-height: 0; }
.bottom { min-height: 220px; }
.info { font-size: 18px; line-height: 1.35; min-width: 150px; }
.info b { color: var(--accent); }
.opp { background: rgba(0,0,0,0.18); border-radius: 14px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opp-top { flex: 1; }
.opp-left, .opp-right { width: 230px; flex: none; }
.who { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.who .av { width: 48px; height: 48px; border-radius: 50%; background: #3b8a63; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 3px solid #9fd3b4; flex: none; }
.who .av img { width: 100%; height: 100%; object-fit: cover; }
.who.turn .av { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.who .pts { margin-left: auto; color: var(--accent); font-weight: 700; }
.who .dealer { background: var(--accent); color: #222; border-radius: 6px; padding: 0 6px; font-size: 16px; }
.tiles { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; }
.tile { width: var(--tile-w); height: var(--tile-h); position: relative; flex: none; }
.tile svg { width: 100%; height: 100%; display: block; }
.tile.sm { width: var(--small-w); height: var(--small-h); }
.tile.md { width: 44px; height: 61px; }
.tile.flower svg rect:first-child { fill: #f1e2c3; }
.tile.claimed { transform: rotate(-90deg) translate(0, 0); margin: 0 10px; }
.tile.back svg rect:first-child { fill: #2f6f4e; }
.meld { display: flex; gap: 1px; margin-right: 8px; align-items: flex-end; }
.melds { display: flex; flex-wrap: wrap; align-items: flex-end; }
.discards { display: grid; grid-template-columns: repeat(auto-fill, var(--small-w)); gap: 2px; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.pool { display: none; }
.last { height: 110px; display: flex; align-items: center; gap: 12px; font-size: 20px; }
.last .tile { width: 72px; height: 100px; }
.msg { font-size: 24px; text-align: center; min-height: 34px; color: var(--accent); }
.me { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.me .melds .tile { width: 48px; height: 66px; }
.hand { display: flex; gap: 4px; align-items: flex-end; justify-content: center; min-height: calc(var(--tile-h) + 24px); }
.hand .tile { transition: transform 0.12s; cursor: pointer; }
.hand .tile.sel { transform: translateY(-22px); }
.hand .tile.sel svg rect:first-child { stroke: #c0392b; stroke-width: 4; }
.hand .tile.drawn { margin-left: 18px; }
.hand .tile.hint svg rect:first-child { stroke: var(--accent); stroke-width: 4; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; min-height: 76px; margin-top: 8px; }
.actions button { font-size: 30px; padding: 10px 26px; min-width: 130px; }
.actions button.win { background: #c0392b; border-color: #f6c7c0; }
.actions button.pass { background: #555; border-color: #aaa; }
.actions button small { font-size: 16px; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
.box { background: var(--felt2); border: 3px solid #9fd3b4; border-radius: 20px; padding: 20px 26px; max-width: 920px; width: 100%; max-height: 92vh; overflow: auto; }
.box h2 { margin: 0 0 10px; font-size: 32px; }
.box .tiles .tile { width: 48px; height: 66px; }
.box table { width: 100%; border-collapse: collapse; font-size: 22px; margin: 10px 0; }
.box td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.box td.n { text-align: right; color: var(--accent); font-weight: 700; }
.box .row { margin-top: 14px; }
.pay { display: flex; gap: 14px; flex-wrap: wrap; font-size: 22px; }
.pay span { background: rgba(0,0,0,0.25); border-radius: 10px; padding: 6px 12px; }
.pay .plus { color: #9fe6b4; } .pay .minus { color: #f6a5a5; }
@media (max-width: 1100px) { :root { --tile-w: 54px; --tile-h: 75px; } .opp-left, .opp-right { width: 190px; } }
@media (max-width: 900px) { :root { --tile-w: 46px; --tile-h: 64px; --small-w: 28px; --small-h: 39px; } .opp-left, .opp-right { width: 150px; } .seats { grid-template-columns: repeat(2, 1fr); } .actions button { font-size: 24px; min-width: 100px; } }
@media (orientation: portrait) { .middle { flex-direction: column; } .opp-left, .opp-right { width: auto; } }