/* Sakura salon: original artwork, gilded game menus and an inset blue table. */
:root { --scene-gold:#e6be77; --scene-dark:#261c34; }
.site-header { height:100px; padding:16px 3%; gap:24px; background:linear-gradient(#261c37b8,transparent); }
.lobby-profile { display:flex; align-items:center; gap:12px; min-width:235px; padding:5px 16px 5px 5px; color:#fff1d7; background:linear-gradient(110deg,#32223cef,#282239bd); border:1px solid #d4ac6c; border-radius:4px 18px 4px 4px; box-shadow:0 4px 16px #26152655,inset 0 0 0 3px #b3895430; text-align:left; }
.lobby-profile .avatar { width:55px; height:61px; border-radius:2px; }
.lobby-profile small { display:block; color:#dcbfa2; font-size:10px; letter-spacing:.13em; margin-bottom:6px; }
.lobby-profile strong { font:700 18px var(--serif); letter-spacing:.08em; }
.profile-flower { color:#ddb4d4; margin-left:auto; font-size:27px; }
.brand { margin-right:auto; }
.brand-seal { display:none; }
.brand-type { font-size:27px; text-shadow:0 2px 1px #4a2449,0 0 16px #472341; }
.header-nav { display:none; }
.header-tools .icon-button { width:48px; height:48px; border:1px solid #e3bf80; border-radius:7px 2px; color:#f5dca1; background:linear-gradient(150deg,#453047e8,#251e33ed); box-shadow:inset 0 0 0 3px #ebc38616,0 4px 8px #2413254d; }
.cpu-badge { padding:9px 12px; border:1px solid #e8c38b6b; background:#302038bd; color:#f8e7cd; border-radius:20px; }
.lobby-screen { min-height:720px; }
.lobby-backdrop { background-position:45% center; filter:saturate(1.16) brightness(1.06); }
.lobby-vignette { background:linear-gradient(0deg,#26172ded 0%,#24193245 23%,transparent 65%),linear-gradient(90deg,#61376213,transparent 48%,#38223e35); }
.standing-character { left:12%; height:109%; bottom:-14%; filter:drop-shadow(10px 15px 19px #3c204561); }
.character-intro { left:6%; bottom:31%; width:355px; }
.character-tag { background:linear-gradient(90deg,#472337dd,transparent); color:#ffe6ab; border-left-color:#f8da91; font-size:12px; }
.character-intro h2 { font-size:clamp(30px,3.6vw,53px); text-shadow:0 2px 0 #662f50,0 4px 16px #301528; }
.character-speech { background:linear-gradient(90deg,#36223fd9,#39273aa8); border:1px solid #e9c4917a; border-radius:2px 14px 2px 14px; font-size:13px; padding:14px 18px; }
.character-select { bottom:115px; left:6%; width:328px; }
.character-select-heading { display:none; }
.character-choice .character-portrait { height:74px; border-color:#d3ac77; border-radius:7px 1px; box-shadow:0 4px 0 #342032; }
.character-choice.selected .character-portrait { border-color:#ffedaa; box-shadow:0 0 0 2px #b58256,0 0 22px #ffd48a6b; }
.character-choice>strong { font-size:11px; color:#fff0dc; }
.lobby-menu { right:7%; width:36%; max-width:490px; top:49%; transform:translateY(-48%); }
.menu-heading h1 { font-size:26px; letter-spacing:.22em; }
.menu-heading .section-kicker { color:#f4d9b5; letter-spacing:.3em; }
.menu-invitation { margin:7px 0 20px; color:#fff0da; }
.mode-options { gap:22px; }
.mode-card { min-height:136px; padding:20px 24px; gap:22px; border:3px solid #edca8b; outline:1px solid #59364a; outline-offset:3px; border-radius:16px 3px 16px 3px; background:linear-gradient(115deg,#54436beb,#283958e8),url('assets/lobby-garden-v2.webp') center/cover; box-shadow:0 7px 0 #472c3ddd,0 11px 20px #25132f5c,inset 0 0 0 4px #f9d99e23; isolation:isolate; }
.mode-card::before { content:''; position:absolute; inset:7px; border:1px solid #ffdf9c62; border-radius:8px 0 8px 0; pointer-events:none; }
.mode-card::after { content:'✿'; top:-25px; right:25px; font-size:170px; color:#f4c9dd23; z-index:-1; }
.mode-card.selected { border-color:#fff0b7; background:linear-gradient(115deg,#695586ed,#384e75ed); box-shadow:0 7px 0 #503248,0 0 24px #ffe0a02b,inset 0 0 0 4px #f9d99e38; }
.mode-card.selected::before { border-color:#ffe7a1ab; }
.mode-card:hover { transform:translateX(-4px); filter:brightness(1.08); }
.mode-emblem { width:62px; height:66px; border:1px solid #edc992ba; border-radius:8px 1px; transform:rotate(-6deg); background:linear-gradient(145deg,#fff0d4,#d3b68d); color:#50354c; font-size:43px; box-shadow:0 4px #64495a,inset 0 0 0 4px #ffefcb; }
.mode-copy>strong { font-size:clamp(30px,3vw,45px); letter-spacing:.08em; color:#fff3d9; text-shadow:0 3px #492b46,0 0 5px #452538; }
.mode-english { font-size:8px; color:#ebceb0; letter-spacing:.2em; }
.mode-description { font-size:12px; color:#fff0de; margin-top:10px; }
.choice-circle { width:20px; height:20px; border-color:#edca88b5; }
.sanma-card { background:linear-gradient(115deg,#955467ef,#613c58f2); }
.sanma-card.selected { background:linear-gradient(115deg,#ac667df5,#81465ff2); }
.sanma-card .mode-emblem { color:#813b51; border-color:#f7d7a3; }
.match-options { margin-top:23px; gap:14px; }
.option-label { color:#fff1d5; font-size:12px; }
.segmented { background:#302238e6; border-color:#d6b78191; }
.segmented>button { font-size:13px; padding:10px 7px; color:#e3d4cc; }
.segmented>button.selected { color:#fff0c5; background:#ab795d64; box-shadow:inset 0 0 0 1px #e9c285b2; }
.mode-summary { margin:13px 0; color:#ffead0; font-size:12px; }
.mode-summary>span,.mode-summary>small { color:#edd9c4; }
.start-game { min-height:69px; border-width:2px; border-radius:12px 2px; background:linear-gradient(105deg,#c49354,#ffe2a3 43%,#efc07c 82%,#ba824b); box-shadow:0 5px #694238,0 9px 18px #32213977,inset 0 0 0 4px #fff4c94a; }
.start-game>span:nth-child(2) { font-size:29px; }
.menu-bottom { margin-top:12px; }
.menu-bottom .text-button { color:#fff0da; font-size:11px; }
.lobby-bottom { display:none; }
.small-stats { border-color:#e0bd8470; background:#382538c9; font-size:11px; }
.small-stats b { color:#ffe5a9; }
.tip-button { display:none; }
.lobby-dock { position:absolute; z-index:5; bottom:0; left:0; right:0; height:84px; padding:0 max(5%,env(safe-area-inset-left)) env(safe-area-inset-bottom); display:flex; justify-content:center; border-top:2px solid #d2aa6d; background:linear-gradient(110deg,#342438ef,#2c243fed 55%,#46263deb); box-shadow:0 -5px 25px #30162b33; }
.lobby-dock>button { flex:1; max-width:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#f3d9ae; position:relative; border-inline:1px solid #d3ad7730; }
.lobby-dock>button>span { font:700 30px/1.1 var(--serif); height:33px; text-shadow:0 2px #5e3d4d; }
.lobby-dock>button>strong { font:600 14px var(--serif); letter-spacing:.12em; }
.lobby-dock>button:hover,.lobby-dock .dock-selected { color:#ffedb6; background:linear-gradient(0deg,#b8864b4d,transparent); }
.dock-selected::after { content:''; position:absolute; bottom:8px; left:30%; right:30%; height:2px; background:#f6ce82; box-shadow:0 0 9px #ffde8f; }
.partner-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.partner-option { min-width:0; padding:5px 5px 13px; border:1px solid #d3b795; background:#eee4d7; border-radius:8px; color:#463344; }
.partner-option.selected { border-color:#bd8c44; box-shadow:0 0 0 2px #e6c987; background:#fff0d4; }
.partner-option .character-portrait { border-radius:5px; }
.partner-option strong { display:block; margin:13px 0 6px; font:700 14px var(--serif); }
.partner-option small { display:block; font-size:10px; color:#876875; }

/* Keep the tested tile coordinates; give the table its own illustrated room. */
.mahjong-table { background:linear-gradient(#30203963,#281a3373),url('assets/lobby-garden-v2.webp') center/cover; }
.mahjong-table::before { content:''; position:absolute; inset:9% 8% 14%; border:14px solid #664b44; border-top-color:#936e52; border-bottom-color:#4c3234; border-radius:44px 44px 22px 22px; background:radial-gradient(ellipse at 50% 32%,#385c86,#29476e 60%,#1d3152); box-shadow:0 0 0 2px #d4aa74,0 12px 0 #2b1b29,0 18px 30px #1f122ac2,inset 0 0 0 3px #162a4b,inset 0 0 65px #12243f80; }
.felt-texture { inset:11% 10% 16%; border-radius:22px; opacity:.6; }
.table-edge { inset:12% 11% 17%; border:1px solid #8dabc229; border-radius:30px 30px 12px 12px; box-shadow:inset 0 0 0 7px #1230512e; }
.table-brand { color:#d4b9c735; }
.game-breadcrumb,.game-top-tools>button:not(.icon-button),.game-top-tools .icon-button { background:linear-gradient(#3f2d43f0,#281f35eb); border-color:#d5b1769c; color:#f7e1b4; box-shadow:inset 0 0 0 2px #e1bf8120,0 3px 7px #21152560; border-radius:7px 2px; }
.game-breadcrumb>strong { color:#fff0d3; font-weight:600; }
.game-top-tools>button:not(.icon-button) { font-size:11px; }
.dora-rack { background:linear-gradient(125deg,#332639f2,#20273fe8); border:1px solid #d7af72; border-radius:10px 2px; box-shadow:0 4px 9px #21162966,inset 0 0 0 3px #d3a97120; gap:7px; }
.round-plaque { font:800 27px/1.3 var(--serif); color:#ffe2a2; letter-spacing:.1em; text-shadow:0 2px #6d474d; }
.dora-rack-label { font-size:9px; padding-top:5px; border-top:1px solid #d7b88842; color:#dacbb9; }
.rack-counters { padding-top:0; color:#dfd0b6; }
.seat-card { gap:0; }
.seat-avatar-wrap { z-index:1; }
.seat-card .avatar { border:2px solid #e9bd77; border-radius:7px 1px; box-shadow:0 0 0 2px #4f3846,0 5px 12px #18223880; }
.seat-info { min-width:100%; padding:7px 9px 5px; margin-top:-2px; background:linear-gradient(#33263ce8,#22233be8); border:1px solid #c5a479b3; border-radius:2px 2px 7px 2px; }
.seat-name { font:700 12px var(--serif); }
.seat-name small { display:none; }
.seat-score { display:block; margin-top:4px; color:#efd29b; font:13px Georgia,serif; font-variant-numeric:tabular-nums; }
.seat-wind { background:linear-gradient(#fff0c3,#d0a567); }
.seat-riichi { z-index:2; font:700 14px var(--serif); background:linear-gradient(#9f4c65,#6e2e4a); }
.human-badge .avatar { border-radius:7px 1px; border:2px solid #f1cd8a; box-shadow:0 0 0 2px #69404b,0 4px 10px #21152a99; }
.human-badge>strong { color:#ffe6b9; font:700 13px var(--serif); }
.table-center { border-color:#816a65; border-right-color:#4d4352; border-bottom-color:#3e3645; border-radius:14px; background:linear-gradient(135deg,#443447,#23243a); box-shadow:0 4px 0 #161c30,0 8px 15px #122038b3,inset 0 0 0 2px #c4a37677; }
.center-main { background:#182d43; border-color:#bd9b726b; box-shadow:inset 0 0 15px #0c1d37; border-radius:8px; }
.center-round { color:#80dddf; text-shadow:0 0 9px #69d0d933; }
.center-wall b { color:#9ae5e2; }
.center-seat-score { color:#f1d389; font-weight:700; }
.center-seat-wind { color:#eee1d3; }
.center-seat.is-turn { background:#dbb26b20; box-shadow:inset 0 -2px #efc96b; border-radius:5px; }
.mahjong-tile { border-bottom-color:#d3bb7e; box-shadow:0 3px 0 #cbb773,0 5px 3px #10223b80,inset 0 0 1px #fff; }
.tile-back { background:linear-gradient(100deg,#ffe2a0,#dbab52); border-top:3px solid #fff4d4; box-shadow:0 3px #91602d,0 5px 4px #14203f99; }
.hand-area::before { content:''; position:absolute; z-index:-1; left:-15%; right:-13%; bottom:-50px; top:18px; border-top:2px solid #bd9a7260; background:linear-gradient(0deg,#352338ef,#583749ab 75%,#50364579); box-shadow:0 -8px 22px #271a2f33; pointer-events:none; }
.hand-status { color:#eee3d4; background:#31223bd6; border:1px solid #cca97850; }
.hand-bottomline { color:#eee0d0; }
.hand-small-actions>button { color:#ffe6b5; }
.hand-tiles .mahjong-tile { background:linear-gradient(105deg,#fffffb,#fbf8ed 74%,#eae3d0); box-shadow:0 5px #cbbb84,0 7px #866b4d,1px 11px 8px #23152aa6; }
.action-btn { min-height:61px; border:2px solid #e9c384; outline-color:#483446; border-radius:13px 3px; background:linear-gradient(140deg,#42648c,#263d6b); box-shadow:0 4px #29223b,0 7px 12px #19183180,inset 0 0 0 3px #fae4b012; }
.action-main { font-size:29px; }
.action-btn.action-riichi { background:linear-gradient(145deg,#b15d70,#742f4c); border-color:#f7ce98; }
.action-btn.action-chi,.action-btn.action-nuki { background:linear-gradient(145deg,#367e7d,#24534f); }
.action-btn.action-kan { background:linear-gradient(145deg,#947349,#554132); }
.action-btn.action-win { background:linear-gradient(135deg,#ffe5ac,#d7a757); }
.action-btn.action-pass { border-radius:10px 2px; }
.action-prompt { background:linear-gradient(90deg,transparent,#30233bdd); color:#f9e8d8; }
.action-prompt strong { color:#ffe6af; }
.game-switches label,.table-quick-tools>button { background:#2d253cd6; border-color:#d1b18170; color:#ede0c8; }
.call-animation { border-block:2px solid #f1cd85; background:linear-gradient(90deg,transparent,#3a2a4bed 23%,#242d48f5 70%,transparent); }
.call-riichi { background:linear-gradient(90deg,transparent,#9b4665ef 23%,#482e51f5 70%,transparent); }
.call-title { text-shadow:0 4px 0 #6e3d51,0 0 28px #ffe2a076; }
.modal { border:2px solid #d8b174; border-radius:12px 3px; background:#fff9ed; box-shadow:0 20px 90px #23152a8c; }
.modal::backdrop { background:#26192b9c; }
.modal-heading h2 { color:#4b3345; }
.modal-intro { color:#786776; }

@media (min-width:1600px) { .standing-character { left:16%; } .lobby-menu { right:9%; max-width:530px; } .mode-card { min-height:145px; } }
@media (min-width:761px) and (min-height:601px) {
 .lobby-menu { top:100px; bottom:104px; transform:none; display:flex; flex-direction:column; justify-content:center; gap:12px; }
 .lobby-menu>* { flex-shrink:0; }
 .menu-invitation { display:none; }
 .mode-card { min-height:clamp(100px,13dvh,136px); padding:12px 22px; }
 .mode-options { gap:16px; }
 .match-options,.mode-summary,.menu-bottom { margin:0; }
 .mode-summary { line-height:1.5; }
 .segmented>button { padding:8px 7px; }
 .start-game { min-height:59px; }
}
@media (min-width:761px) and (min-height:601px) and (max-height:820px) {
 .lobby-menu { gap:9px; }
 .menu-heading { display:none; }
 .mode-card { min-height:100px; }
 .mode-copy>strong { font-size:31px; }
 .mode-description { margin-top:6px; font-size:11px; }
 .mode-emblem { width:54px; height:59px; font-size:38px; }
}
@media (min-width:761px) and (max-width:1100px) and (min-height:601px) { .lobby-profile { min-width:200px; } .lobby-profile strong { font-size:16px; } .brand-type { font-size:22px; } .cpu-badge { display:none; } .standing-character { left:1%; } .lobby-menu { right:4%; width:41%; } .mode-card { gap:15px; padding:12px 17px; min-height:100px; } .mode-copy>strong { font-size:31px; } .character-intro { left:4%; width:290px; } .character-select { left:4%; width:290px; } }

@media (max-width:760px) and (orientation:portrait) {
 .site-header { height:80px; padding:10px 13px; gap:8px; align-items:flex-start; }
 .lobby-profile { min-width:0; width:205px; gap:8px; padding:4px 9px 4px 4px; }
 .lobby-profile .avatar { width:39px; height:44px; }
 .lobby-profile small { font-size:8px; margin-bottom:5px; }
 .lobby-profile strong { font-size:15px; }
 .profile-flower { font-size:20px; }
 .brand { position:absolute; top:86px; left:20px; }
 .brand-type { font-size:25px; }
 .brand-type small { font-size:6px; }
 .header-tools { margin-left:auto; }
 .header-tools .icon-button { width:35px; height:39px; }
 .cpu-badge { display:none; }
 .lobby-screen { height:100dvh; min-height:740px; }
 .lobby-backdrop { background-position:35% center; }
 .lobby-vignette { background:linear-gradient(0deg,#2d1d36f2 0%,#3021399e 21%,transparent 55%); }
 .standing-character { top:16%; left:-27%; bottom:auto; height:77%; }
 .character-intro { left:16px; top:auto; bottom:234px; width:49%; }
 .character-intro h2 { font-size:27px; line-height:1.4; letter-spacing:.04em; }
 .character-tag { font-size:9px; padding:4px 7px; }
 .character-speech { font-size:10px; line-height:1.8; padding:8px 10px; margin-top:9px; }
 .lobby-menu { top:24%; bottom:auto; left:auto; right:14px; width:47%; max-width:none; transform:none; padding:0; }
 .menu-heading { margin-bottom:13px; gap:8px; }
 .menu-heading h1 { font-size:20px; letter-spacing:.1em; }
 .menu-heading .section-kicker,.menu-invitation { display:none; }
 .mode-options { grid-template-columns:1fr; gap:15px; }
 .mode-card { min-height:98px; padding:15px 10px; gap:9px; border-width:2px; border-radius:11px 2px; }
 .mode-card::before { inset:4px; }
 .mode-card::after { font-size:113px; right:-3px; top:-6px; }
 .mode-emblem { width:30px; height:42px; font-size:27px; box-shadow:0 3px #65415b,inset 0 0 0 2px #ffe6bd; border:1px solid #e4bc84; flex-shrink:0; }
 .mode-copy>strong { font-size:25px; letter-spacing:.02em; }
 .mode-english { font-size:5px; letter-spacing:.12em; }
 .mode-description { font-size:9px; margin-top:6px; }
 .choice-circle { width:12px; height:12px; font-size:8px; right:6px; top:6px; }
 .match-options { display:block; margin-top:17px; }
 .option-label { display:none; }
 .segmented { padding:3px; gap:1px; }
 .segmented>button { font-size:10px; padding:9px 1px; }
 .mode-summary { font-size:10px; margin:10px 0; }
 .mode-summary>small { display:block; font-size:8px; margin:2px 0 0; }
 .start-game { min-height:56px; border-radius:9px 2px; }
 .start-game>span:nth-child(2) { font-size:24px; letter-spacing:.1em; }
 .start-game small { font-size:6px; }
 .start-decoration { left:9px; font-size:15px; }
 .start-arrow { right:8px; font-size:25px; }
 .menu-bottom { justify-content:center; margin-top:10px; }
 .menu-bottom .text-button { font-size:9px; }
 #credits-button { display:none; }
 .character-select { display:none; }
 .character-grid { gap:11px; }
 .character-choice .character-portrait { height:56px; }
 .character-choice>strong { font-size:9px; }
 .lobby-bottom { display:none; }
 .small-stats { display:block; padding:9px; }
 .small-stats>span:not(:first-child) { display:none; }
 .lobby-dock { height:calc(75px + env(safe-area-inset-bottom)); padding-inline:4px; }
 .lobby-dock>button>span { font-size:25px; height:28px; }
 .lobby-dock>button>strong { font-size:12px; }
 .dock-selected::after { bottom:7px; }
 .partner-gallery { grid-template-columns:1fr 1fr; gap:12px; }
 .mahjong-table::before { inset:19% 2% 17%; border-width:9px; border-radius:24px 24px 14px 14px; }
 .felt-texture { inset:21% 4% 18%; }
 .table-edge { inset:22% 5% 19%; border-radius:18px; }
 .table-board { top:43%; }
 .game-top-tools>button:not(.icon-button) { font-size:9px; }
 .dora-rack { left:14px; top:65px; gap:4px; padding:6px 9px; }
 .round-plaque { font-size:20px; }
 .dora-rack-label { display:none; }
 .rack-counters { font-size:8px; }
 .dora-tiles .mahjong-tile { width:16px; }
 .orientation-tip { display:none; }
 .table-quick-tools { top:83px; }
 .seat-card { width:64px; }
 .opponent-top .seat-card { left:calc(50% - 32px); top:-15%; }
 .opponent-left .seat-card,.opponent-right .seat-card { top:-4%; }
 .seat-card .avatar { width:43px; height:49px; }
 .seat-info { padding:5px 4px 4px; }
 .seat-name { font-size:10px; }
 .seat-score { font-size:11px; margin-top:2px; }
 .seat-riichi { font-size:10px; }
 .table-center { border-radius:9px; }
 .center-main { border-radius:4px; }
 .hand-area::before { top:20px; bottom:-55px; left:-12px; right:-12px; }
 .human-badge>strong { font-size:11px; }
 .action-main { font-size:24px; }
 .action-btn { min-height:55px; padding:8px 11px; }
 .game-switches label { font-size:9px; }
}

@media (max-height:600px) and (orientation:landscape), (max-width:760px) and (orientation:landscape) {
 .site-header { height:55px; padding:7px max(14px,env(safe-area-inset-left)); gap:14px; }
 .lobby-profile { min-width:180px; padding:3px 10px 3px 3px; gap:7px; }
 .lobby-profile .avatar { width:30px; height:34px; }
 .lobby-profile small { font-size:7px; margin-bottom:3px; }
 .lobby-profile strong { font-size:13px; }
 .profile-flower { font-size:19px; }
 .brand-type { font-size:22px; }
 .brand-type small { font-size:5px; margin-top:4px; }
 .header-tools .icon-button { width:32px; height:34px; }
 .cpu-badge { display:none; }
 .lobby-screen { min-height:340px; }
 .standing-character { height:119%; left:10%; bottom:-19%; }
 .character-intro { left:5%; bottom:36%; width:250px; }
 .character-intro h2 { font-size:29px; }
 .character-tag { font-size:8px; padding:3px 8px; margin-bottom:5px; }
 .character-speech { font-size:9px; padding:8px 11px; margin-top:7px; }
 .character-select { left:5%; bottom:70px; width:225px; }
 .character-choice .character-portrait { height:41px; }
 .character-choice>strong { font-size:8px; margin-top:5px; }
 .character-grid { gap:12px; }
 .lobby-menu { width:39%; max-width:440px; right:5%; top:calc(50% + 1px); transform:translateY(-50%); }
 .menu-heading { margin-bottom:8px; }
 .menu-heading h1 { font-size:19px; }
 .menu-heading .section-kicker,.menu-invitation { display:none; }
 .mode-options { grid-template-columns:1fr 1fr; margin-top:0; gap:12px; }
 .mode-card { min-height:84px; padding:12px 9px; gap:7px; border-width:2px; border-radius:10px 2px; }
 .mode-card::before { inset:4px; }
 .mode-card::after { font-size:95px; right:-20px; top:0; }
 .mode-emblem { width:28px; height:39px; font-size:25px; box-shadow:0 2px #64415c,inset 0 0 0 2px #ffeac7; }
 .mode-copy>strong { font-size:22px; letter-spacing:0; }
 .mode-english { font-size:5px; letter-spacing:0; }
 .mode-description { font-size:8px; margin-top:5px; }
 .choice-circle { width:11px; height:11px; font-size:7px; }
 .match-options { margin-top:15px; gap:9px; }
 .option-label { font-size:9px; }
 .segmented>button { font-size:10px; padding:6px; }
 .mode-summary { margin:7px 0; font-size:9px; }
 .mode-summary>small { font-size:8px; }
 .start-game { min-height:45px; border-radius:8px 2px; }
 .start-game>span:nth-child(2) { font-size:23px; }
 .start-game small { font-size:5px; margin-top:2px; }
 .menu-bottom { margin-top:7px; }
 .menu-bottom .text-button { font-size:9px; padding:3px; }
 .lobby-bottom { display:none; }
 .lobby-dock { height:53px; padding-inline:5%; padding-bottom:0; }
 .lobby-dock>button { flex-direction:row; gap:11px; }
 .lobby-dock>button>span { font-size:25px; height:29px; }
 .lobby-dock>button>strong { font-size:12px; }
 .dock-selected::after { bottom:4px; }
 .mahjong-table::before { inset:9% 8% 17%; border-width:8px; border-radius:28px 28px 13px 13px; }
 .felt-texture { inset:11% 10% 19%; }
 .table-edge { inset:13% 11% 20%; }
 .dora-rack { top:49px; gap:4px; padding:6px 8px; }
 .round-plaque { font-size:18px; }
 .dora-rack-label { display:none; }
 .dora-tiles .mahjong-tile { width:15px; }
 .seat-info { padding:4px 4px 3px; }
 .seat-name { font-size:9px; }
 .seat-score { font-size:10px; margin-top:2px; }
 .seat-riichi { font-size:9px; }
 .table-center { border-radius:8px; }
 .center-main { border-radius:4px; }
 .game-top-tools>button:not(.icon-button) { font-size:8px; }
 .hand-area::before { top:11px; }
 .human-badge>strong { font-size:10px; }
 .action-btn { min-width:55px; min-height:46px; padding:6px 10px; border-radius:9px 2px; }
 .action-main { font-size:21px; }
 .action-caption { font-size:6px; }
}
@media (max-height:390px) and (orientation:landscape) {
 .lobby-menu { top:49%; }
 .menu-heading { display:none; }
 .mode-card { min-height:71px; }
 .match-options { margin-top:11px; }
 .mode-summary { margin:6px 0; }
 .character-intro { bottom:37%; }
 .character-speech { display:none; }
 .lobby-dock { height:48px; }
 .character-select { bottom:64px; }
 .seat-card .avatar { width:34px; height:38px; }
 .seat-info { padding:3px; }
 .round-plaque { font-size:15px; }
}
@media (max-width:900px) and (orientation:landscape) { .mode-emblem { display:none; } .mode-card { justify-content:center; } .mode-copy>strong { font-size:22px; } }
@media (max-width:370px) and (orientation:portrait) {
 .lobby-profile { width:193px; }
 .lobby-profile strong { font-size:14px; }
 .header-tools { gap:4px; }
 .header-tools .icon-button { width:30px; }
 .mode-emblem { display:none; }
 .mode-card { padding-left:18px; }
 .character-select { width:228px; }
 .character-intro h2 { font-size:25px; }
}