.game-modal{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at center,#2e7d52,#1d5638 70%,#143f29);user-select:none;overflow:hidden}.modal-close{position:fixed;top:10px;right:12px;z-index:60;width:36px;height:36px;border:none;border-radius:50%;background:#00000059;color:#ffffffd9;font-size:16px;cursor:pointer}.modal-close:hover{background:#0000008c}.game-hud{position:fixed;top:10px;left:12px;z-index:30;display:flex;align-items:center;gap:8px;color:#ffffffe0}.hud-btn,.hud-toggle,.hud-select{min-height:34px;border:1px solid rgba(255,215,102,.28);border-radius:10px;background:#00000052;color:#ffffffe0;font-size:13px;font-weight:700}.hud-btn{padding:0 12px;cursor:pointer}.hud-toggle{display:inline-flex;align-items:center;gap:6px;padding:0 10px;cursor:pointer}.hud-toggle input{accent-color:#ffd766}.hud-toggle.on,.hud-btn:hover,.hud-select:focus-within{border-color:#ffd766ad;color:#ffd766}.hud-select{display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 10px}.hud-select select{border:none;background:transparent;color:inherit;font:inherit;outline:none;cursor:pointer}.hud-select option{color:#1d2b22}.ruleset-select{max-width:210px}.status{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:min(280px,42vw);margin:8px auto 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);color:#fffc;text-align:center;pointer-events:none}.status strong{color:#fff;font-size:15px}.status span{font-size:12px;color:#ffffff9e}.status.status-action{border-top-color:#ffd76685}.table{--rt: clamp(16px, 3.9dvh, 28px);height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:auto 1fr auto;grid-template-areas:". top ." "left center right" "bottom bottom bottom";padding:10px 16px;gap:6px}.seat{display:flex;align-items:center;gap:8px}.seat.top{grid-area:top;justify-content:center}.seat.left,.seat.right{flex-direction:column;justify-content:center;min-height:0;overflow:hidden}.seat.left{grid-area:left}.seat.right{grid-area:right}.seat.bottom{grid-area:bottom;flex-direction:column;justify-content:flex-end;gap:6px;padding-bottom:4px}.label{color:#ffffff8c;font-size:13px;letter-spacing:2px;white-space:nowrap;padding:2px 12px;border-radius:10px}.label.active{color:#3d2c00;font-weight:700;background:linear-gradient(180deg,#ffd766,#f0a93b);box-shadow:0 0 12px #ffd76699}.label .count{display:none;margin-left:5px;background:#00000059;color:#fff;border-radius:8px;padding:1px 7px;font-size:12px;font-style:normal}.backs{display:flex;gap:2px}.backs.row .tile{width:clamp(16px,4dvh,30px)}.backs.col{flex-direction:column;flex-shrink:0}.backs.col .tile{width:clamp(12px,calc((100dvh - 228px) / 18.7),26px)}.tile{position:relative;width:var(--w, 40px);aspect-ratio:3 / 4;flex-shrink:0;border:none;background:none;display:inline-block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}.tile img{position:absolute;inset:0;width:100%;height:100%;display:block}.tile.clickable{cursor:pointer;transition:transform .12s ease}.tile.clickable:hover{transform:translateY(-10px)}.my-hand .tile.clickable{border-radius:6px}.my-hand .tile.clickable:after{content:"";position:absolute;inset:-3px;border:1px solid rgba(255,215,102,.42);border-radius:7px;opacity:.78}.tile.fresh{z-index:1;animation:fresh-pulse 1.2s ease-in-out infinite}@keyframes fresh-pulse{0%,to{filter:drop-shadow(0 0 3px rgba(255,215,102,.9))}50%{filter:drop-shadow(0 0 9px rgba(255,200,60,1))}}.my-hand{display:flex;align-items:flex-end;gap:3px;max-width:100%}.my-hand .tile{width:clamp(26px,min(calc((100dvw - 56px) / 14.5),9.5dvh),54px)}.my-hand .drawn{margin-left:16px;display:inline-flex}.tile.placeholder{visibility:hidden}.center{grid-area:center;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr auto 1fr;grid-template-areas:". rtop ." "rleft info rright" ". rbottom .";gap:8px;min-height:0}.river{display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start}.river .tile{width:var(--rt)}.river.rtop{grid-area:rtop;justify-content:center;width:calc(var(--rt) * 14.3);height:calc(var(--rt) * 2.8);justify-self:center}.river.rbottom{grid-area:rbottom;justify-content:center;width:calc(var(--rt) * 14.3);height:calc(var(--rt) * 2.8);justify-self:center}.river.rleft{grid-area:rleft;width:calc(var(--rt) * 4.65);height:calc(var(--rt) * 7.15);justify-self:end;align-self:center}.river.rright{grid-area:rright;width:calc(var(--rt) * 4.65);height:calc(var(--rt) * 7.15);justify-self:start;align-self:center}.info{grid-area:info;align-self:center;text-align:center;color:#ffffffb3;background:#0000002e;border-radius:12px;padding:clamp(6px,2dvh,14px) clamp(14px,3.6dvh,26px)}.wall-count{font-size:clamp(18px,4.2dvh,30px);font-weight:700;color:#fff}.wall-hint{font-size:12px;margin-top:2px}.ruleset-note{max-width:260px;margin-top:8px;font-size:11px;line-height:1.35;color:#ffffff94}.melds{display:flex;gap:8px}.melds .tile{width:clamp(18px,4dvh,30px)}.melds.col{flex-direction:column}.meld{display:inline-flex;gap:1px}.actions{position:fixed;left:50%;bottom:clamp(104px,22dvh,150px);transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#00000073;border-radius:16px;padding:10px 14px;z-index:10}.act{border:none;border-radius:10px;padding:8px 20px;font-size:18px;font-weight:700;cursor:pointer;background:#f3e9d2;color:#5b4a21;transition:transform .1s ease}.act:hover{transform:scale(1.06)}.act.primary{background:linear-gradient(180deg,#ffd766,#f0a93b);color:#6b3c00}.act.pass{background:#ffffff40;color:#fff}.act.visual{display:inline-flex;align-items:center;gap:8px;padding:7px 14px}.action-tiles{display:inline-flex;align-items:center;gap:1px}.action-tiles .tile{width:clamp(22px,5dvh,30px);filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}.overlay{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.result{background:#1d5638;border:2px solid rgba(255,215,102,.5);border-radius:20px;padding:36px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}.result h1{color:#ffd766;font-size:34px;letter-spacing:4px}.win-note{margin-top:-12px;color:#ffffffb8;font-size:14px}.win-hand{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:min(640px,86vw)}.win-hand .tile{width:clamp(22px,5.5vw,40px)}.win-hand .gap{width:14px}.guide-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:#00000094}.guide-card{width:min(640px,94vw);max-height:min(84vh,720px);overflow-y:auto;border:1px solid rgba(255,215,102,.42);border-radius:18px;background:#1d5638;box-shadow:0 18px 60px #00000073;padding:26px 30px;color:#ffffffdb}.guide-card h2{margin-bottom:14px;color:#ffd766;font-size:24px}.guide-section{margin-bottom:18px}.guide-section h3{margin:0 0 8px;color:#ffffffeb;font-size:15px}.guide-card ol{display:flex;flex-direction:column;gap:10px;margin:0 0 0 20px}.current-ruleset{padding:12px 14px;border:1px solid rgba(255,215,102,.38);border-radius:10px;background:#ffd7661a}.current-ruleset strong,.ruleset-card strong{display:block;color:#fff;font-size:15px}.current-ruleset p,.ruleset-card p{margin:5px 0 0;color:#ffffffb3;font-size:12px;line-height:1.45}.ruleset-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ruleset-card{min-height:96px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#00000029}.ruleset-card.active{border-color:#ffd76680;background:#ffd7661f}.guide-card .act{width:100%}@media(max-width:720px){.game-hud{right:58px;gap:5px}.hud-btn,.hud-toggle,.hud-select{min-height:30px;font-size:12px}.hud-select span{display:none}.ruleset-select{max-width:112px}.status{max-width:46vw;margin:6px auto 0;padding-top:6px}.status strong{font-size:13px}.table{grid-template-rows:auto 1fr auto;grid-template-columns:1fr auto 1fr;grid-template-areas:"left top right" "center center center" "bottom bottom bottom";padding:8px;gap:4px}.backs{display:none}.label .count{display:inline-block}.seat.left,.seat.right{flex-direction:column;justify-content:flex-start;gap:4px}.seat.top{align-items:flex-start;flex-direction:column}.melds .tile{width:18px}.melds.col{flex-direction:row}.river .tile{width:19px}.river.rleft,.river.rright{width:64px;height:170px}.river.rtop,.river.rbottom{width:72vw;height:54px}.info{padding:8px 14px;border-radius:10px}.wall-count{font-size:20px}.wall-hint{font-size:10px}.ruleset-note{display:none}.my-hand{width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:10px 8px 2px;row-gap:6px;scrollbar-width:none}.my-hand::-webkit-scrollbar{display:none}.my-hand .tile{width:clamp(24px,calc((100dvw - 54px) / 13.2),38px)}.my-hand .drawn{margin-left:8px}.actions{bottom:96px;padding:8px 10px;gap:6px;max-width:94vw;flex-wrap:wrap;justify-content:center}.act{font-size:15px;padding:6px 14px}.act.visual{gap:5px;padding:6px 10px}.action-tiles .tile{width:22px}.result{padding:22px 18px;max-width:92vw}.result h1{font-size:24px}.guide-card{padding:22px 20px}.guide-card h2{font-size:21px}.ruleset-cards{grid-template-columns:1fr}.ruleset-card{min-height:0}}