/* Home and room setup stay in the phone's natural orientation. */
#home.home{position:fixed;inset:0;z-index:1;overflow:auto;min-height:0;padding:24px 40px;color:#f6f2e5;text-align:left;background:radial-gradient(ellipse at 18% 50%,#205b46 0,transparent 65%),#0b2e25}
#home.home.hidden{display:none!important}
#home .home-frame{width:min(1080px,100%);min-height:100%;margin:auto;display:grid;grid-template-rows:64px 1fr 36px;gap:24px}
#home .home-header{height:auto;padding:0 0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;border-bottom:1px solid #d7d4b32b}
.home-brand{display:flex;gap:12px;align-items:center;color:#f5edce;text-decoration:none}.home-brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid #cfb46b;border-radius:12px;font:30px KaiTi,STKaiti,serif;color:#e8cb8c}.home-brand strong,.home-brand small{display:block}.home-brand strong{font-size:18px;letter-spacing:3px;font-weight:600}.home-brand small{font-size:9px;letter-spacing:2px;color:#afc0ae;margin-top:5px}
.home-profile{display:flex;gap:9px;align-items:center;color:#c4d1c3;font-size:13px}.profile-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid #9eaf8d;background:#264d3d;color:#edddb2}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar b{font-weight:500}#home-name{max-width:130px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#home .home-main{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);gap:60px;align-items:center;padding:20px 0;min-height:0;overflow:visible;background:none}
.home-kicker{display:flex;gap:8px;align-items:center;font-size:12px;color:#b1c6ad;letter-spacing:1px}.home-kicker>span{width:18px;height:1px;background:#c9b47a}#home h1{font-size:clamp(32px,4vw,47px);letter-spacing:2px;font-weight:500;line-height:1.45;margin:21px 0 17px}.home-description{font-size:14px;color:#b9cbb8;line-height:1.9;margin:0}.home-features{display:flex;gap:20px;color:#afc6af;font-size:11px;letter-spacing:1px}.home-features span:before{content:'·';margin-right:7px;color:#dfc27a}
.home-tile-art{position:relative;display:flex;align-items:center;gap:12px;height:180px;padding:15px 0 15px 22px;margin:5px 0 17px;pointer-events:none}.art-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:79px;height:112px;border:1px solid #f5f1d6;border-radius:7px;background:linear-gradient(110deg,#fffff1,#e7e7d1);box-shadow:0 7px 0 #bea356,0 9px 0 #355a32,4px 17px 17px #001c1955;font-family:KaiTi,STKaiti,serif}.art-wan{color:#b23c31;transform:rotate(-13deg) translateY(7px)}.art-wan i{font:30px/1.1 KaiTi,serif}.art-wan b{font:44px/1.05 KaiTi,serif}.art-fa{font-size:63px;color:#205c3d;transform:translateY(-9px) rotate(-2deg)}.art-tong{color:#28556a;transform:rotate(12deg) translateY(7px);gap:2px}.art-tong i{font:20px/1.1 Arial,sans-serif;letter-spacing:1px}.art-seal{margin-left:30px;padding:5px 7px;border:1px solid #c5b8896b;color:#c5b889;font:17px/1.4 KaiTi,serif;transform:rotate(6deg)}
.play-card{padding:30px;border:1px solid #b7c49466;border-radius:20px;background:#f4f1e5;color:#203e31;box-shadow:0 20px 60px #001c1940}.play-card-heading{margin-bottom:24px}.play-card-heading>small{color:#7d8468;font-size:11px;letter-spacing:2px}.play-card h2{font-size:25px;margin:7px 0 0;font-weight:600}.nickname-label{font-size:12px;color:#607362;margin:0 0 8px}.play-card #nickname{height:46px;border:1px solid #c6cebc;border-radius:8px;background:#fffdf3;color:#203e31;font-size:16px;padding:0 13px;box-shadow:none;outline-offset:2px}.play-card #nickname:focus{border-color:#718b64}.mode-button{display:flex;align-items:center;gap:13px;width:100%;min-height:79px;padding:15px 16px;border-radius:10px;text-align:left}.mode-button>span:nth-child(2){display:grid;gap:6px;flex:1}.mode-button strong{font-size:17px;font-weight:600;letter-spacing:1px}.mode-button small{font-size:11px;line-height:1.4;font-weight:400}.mode-button>b{font-size:23px;font-weight:400}.mode-symbol{display:grid;place-items:center;flex:none;width:39px;height:39px;border:1px solid #ffffff40;border-radius:9px;font:24px KaiTi,serif}.friends-button{margin-top:20px;background:#245942;border:1px solid #245942;color:#fff7df}.friends-button small{color:#cedaca}.friends-button:hover{background:#31694e}.solo-button{margin-top:11px;background:#e6e8d8;border:1px solid #cbd2bb;color:#385340}.solo-button .mode-symbol{border-color:#b9c5aa}.solo-button small{color:#64765e}.solo-button:hover{background:#dce2cb}.solo-button:disabled{opacity:.65}.solo-state{font-size:10px;color:#7d856f;line-height:1.6;margin:8px 0 0}.resume-button{width:100%;padding:13px 0 0;background:transparent;border:0;color:#315c44;font-size:12px;text-decoration:underline;text-underline-offset:4px}.connection-row{display:flex;gap:9px;align-items:center;margin-top:17px;padding-top:13px;border-top:1px solid #cdd1c0}.load-state{flex:1;font-size:10px;color:#78856e;line-height:1.5;margin:0}.connection-row button{flex:none;background:none;border:0;color:#607951;padding:8px 0 8px 8px;font-size:11px}
#home .home-footer{height:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 0 0;border-top:1px solid #d7d4b32b;background:none;color:#93ad99;font-size:10px;letter-spacing:1px}
.room-setup{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px}.setup-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#001b17c9;backdrop-filter:blur(4px)}.setup-card{position:relative;width:min(420px,100%);max-height:calc(100dvh - 36px);overflow:auto;border:1px solid #c3cdb6;border-radius:18px;padding:29px;background:#f4f1e5;color:#294736;box-shadow:0 20px 80px #0005}.setup-close{position:absolute;right:12px;top:10px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#dfe4d4;color:#466245;font-size:24px}.setup-eyebrow{font-size:11px;letter-spacing:2px;color:#849078}.setup-card h2{font-size:24px;margin:8px 0 10px;font-weight:600}.setup-description{font-size:12px;color:#73826c;line-height:1.8}.create-room-button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:49px;margin-top:23px;padding:12px 16px;border:1px solid #28563e;border-radius:8px;background:#28563e;color:#f9f3dc;font-size:15px}.create-room-button:hover{background:#35684c}.create-room-button>span{font-size:22px}.setup-divider{display:flex;gap:12px;align-items:center;color:#8a957c;font-size:11px;margin:23px 0 18px}.setup-divider:before,.setup-divider:after{content:'';height:1px;flex:1;background:#d2d8c7}.room-code-label{display:block;color:#5c735d;font-size:12px;margin:0 0 8px}.room-code-row{display:flex;gap:8px}.room-code-row input{min-width:0;height:48px;padding:0 10px;border:1px solid #bbc8ad;border-radius:8px;background:#fffdf4;color:#284a37;text-align:center;font:21px Arial,sans-serif;letter-spacing:7px}.room-code-row input::placeholder{font-size:13px;letter-spacing:1px;color:#96a18a}.room-code-row button{flex:none;min-height:48px;padding:9px 13px;background:#e0e5cd;border:1px solid #bccaa9;border-radius:8px;color:#2f543a;font-size:13px;font-weight:600}.setup-hint{display:block;margin-top:12px;font-size:11px;line-height:1.7;color:#8b957f}.room-error{color:#b24431;font-size:12px;line-height:1.6;min-height:19px;margin:8px 0 0}
/* The lobby uses the same seat directions as the live table. */
#lobby .overlay-box{width:680px;max-height:600px;padding:23px 35px;border:1px solid #9fb38c;border-radius:16px;background:#103d30f5;box-shadow:0 16px 50px #001f1977}#lobby .overlay-box h2{font-size:25px;margin:5px 0 10px;color:#f2e5af}#lobby .overlay-box p{font-size:16px;margin:7px 0;color:#c5d2bd}#lobby .overlay-box strong{font-size:25px;color:#f2db8f;letter-spacing:5px}#lobby .eyebrow{font-size:11px;letter-spacing:3px}#lobby-seats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,65px);gap:6px;margin:16px 0}#lobby-seats:before{content:'象山';grid-column:2;grid-row:2;align-self:center;font:25px KaiTi,serif;color:#b3c59366}#lobby-seats .seat-top{grid-column:2;grid-row:1}#lobby-seats .seat-left{grid-column:1;grid-row:2}#lobby-seats .seat-right{grid-column:3;grid-row:2}#lobby-seats .seat-bottom{grid-column:2;grid-row:3}#lobby-seats .lobby-seat{display:grid;grid-template-columns:36px 1fr;grid-template-rows:1fr 1fr;gap:1px 8px;align-items:center;min-width:0;min-height:0;margin:0;padding:8px;border:1px solid #799780;border-radius:9px;background:#23513c;color:#e8ebd8;text-align:left}#lobby-seats .lobby-seat:disabled{opacity:1;cursor:default}#lobby-seats .lobby-seat.vacant{border-style:dashed;background:#164331;color:#b6c6ab}#lobby-seats .lobby-seat.mine{border-color:#dfc77e;box-shadow:0 0 0 1px #dfc77e44;background:#3c5939}#lobby-seats .seat-avatar{display:grid;grid-row:1/3;place-items:center;width:34px;height:34px;border:1px solid #90ab80;border-radius:50%;overflow:hidden;font-size:17px;background:#184b34}#lobby-seats .seat-avatar img{width:100%;height:100%;object-fit:cover}#lobby-seats .lobby-seat strong{font-size:12px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}#lobby-seats .lobby-seat small{font-size:10px;color:#b9c6ac}#invite-address{max-width:100%;margin:6px 0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a9c1a4;font-size:12px;user-select:text}#lobby #copy-link,#lobby #start{min-height:49px;margin:3px;padding:10px 17px;font-size:16px;border-radius:8px}#lobby #copy-link{border-color:#72956d;background:#23513c;color:#dce5c9}#lobby #start{border-color:#dcc68b;background:#ddc98f;color:#2b4d36}#lobby #lobby-note{font-size:12px;line-height:1.7;color:#99b39a}
@media(max-width:760px){#home.home{padding:18px 22px}#home .home-frame{grid-template-rows:51px 1fr 34px;gap:15px}#home .home-header{padding-bottom:12px}.home-brand strong{font-size:16px}.home-brand small{font-size:8px}.home-brand-mark{width:36px;height:36px;font-size:26px}#home .home-main{grid-template-columns:1fr;gap:21px;padding:11px 0 15px}#home .home-intro{position:relative;padding-right:100px}#home h1{font-size:29px;margin:12px 0 10px;line-height:1.35}.home-kicker{font-size:10px;letter-spacing:0}.home-description{font-size:11px;line-height:1.7}.home-tile-art{position:absolute;right:0;top:38px;width:95px;height:115px;padding:0;gap:0;transform:rotate(8deg);margin:0}.art-tile{position:absolute;width:49px;height:70px}.art-wan{left:0;z-index:1;transform:rotate(-13deg) translateY(9px)}.art-wan i{font-size:20px}.art-wan b{font-size:29px}.art-fa{left:23px;z-index:2;font-size:38px;transform:translateY(-13px)}.art-tong{left:46px;z-index:3;transform:rotate(13deg) translateY(8px)}.art-tong i{font-size:13px}.art-seal{display:none}.home-features{gap:13px;font-size:10px;margin-top:18px}.play-card{padding:22px;border-radius:16px}.play-card-heading{margin-bottom:17px}.play-card h2{font-size:22px;margin-top:5px}.mode-button{min-height:70px;padding:12px 14px}.mode-button strong{font-size:16px}.mode-button small{font-size:10px}.friends-button{margin-top:16px}.connection-row{margin-top:14px}#home .home-footer{font-size:9px;letter-spacing:0}.setup-card{padding:25px 21px}}
@media(min-width:761px) and (max-height:650px){#home.home{padding-top:14px;padding-bottom:14px}#home .home-frame{gap:12px;grid-template-rows:50px 1fr 25px}#home .home-main{padding:10px 0;gap:40px}.play-card{padding:22px}.play-card-heading{margin-bottom:14px}.home-tile-art{height:125px;margin:0}.art-tile{width:65px;height:93px}.art-fa{font-size:51px}.mode-button{min-height:66px;padding:10px 14px}}
@media(max-height:430px) and (orientation:landscape){#home.home{padding:12px 20px}#home .home-frame{grid-template-rows:42px 1fr 24px;gap:7px}#home .home-main{grid-template-columns:1fr 1fr;gap:22px;padding:6px 0}.home-intro{padding:0!important}#home h1{font-size:26px}.home-tile-art,.home-features,.home-kicker{display:none}.play-card{padding:16px}.play-card-heading{margin-bottom:10px}.play-card-heading>small{display:none}.play-card h2{font-size:18px;margin:0}.play-card #nickname{height:39px}.mode-button{min-height:52px;margin-top:9px;padding:8px 11px}.mode-symbol{width:31px;height:31px;font-size:20px}.mode-button strong{font-size:14px}.mode-button small{font-size:9px}.solo-state{display:none}.connection-row{margin-top:8px;padding-top:5px}.load-state{font-size:9px}}
@supports(padding:max(0px,env(safe-area-inset-top))){#home.home{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}}
#home.home{display:flex;flex-direction:column}#home .home-frame{flex:1;min-height:0}
@media(max-width:760px) and (orientation:portrait){#home h1{font-size:clamp(22px,6.6vw,28px);letter-spacing:1px}}
#lobby .overlay-box{display:grid;grid-template-columns:1fr 1.12fr;grid-template-rows:auto auto auto auto auto 76px auto;gap:6px 25px;align-items:center;width:1040px;max-height:620px;padding:25px 28px}#lobby .overlay-box>.eyebrow{grid-column:1;grid-row:1;font-size:15px}#lobby-title{grid-column:1;grid-row:2}#lobby .overlay-box h2{font-size:31px;margin:3px 0}#lobby .overlay-box>p:not([id]){grid-column:1;grid-row:3;font-size:23px}#lobby-hint{grid-column:1;grid-row:4}#lobby .overlay-box #lobby-hint{font-size:19px;line-height:1.6}#lobby-seats{grid-column:2;grid-row:1/6;grid-template-rows:repeat(3,88px);gap:8px;margin:5px 0}#lobby-seats .lobby-seat{grid-template-columns:35px minmax(0,1fr);column-gap:7px;padding:9px 7px}#lobby-seats .lobby-seat strong{font-size:18px}#lobby-seats .lobby-seat small{font-size:14px}#lobby #invite-address{grid-column:1;grid-row:5;font-size:15px;margin:4px 0 7px}#lobby #copy-link{grid-column:1;grid-row:6}#lobby #start{grid-column:2;grid-row:6}#lobby #copy-link,#lobby #start{min-height:76px;height:76px;margin:0;font-size:21px}#lobby #lobby-note{grid-column:1/3;grid-row:7;margin:8px 0 0;font-size:15px;line-height:1.6}