/* A paper landscape, a quiet title, and two clear ways to enter the game. */
body.at-home{background:#f4efe3;overflow-x:hidden}
.at-home .paper-wash{opacity:0}
.at-home #app{max-width:none;padding:0 clamp(20px,4.5vw,80px)}
.at-home .topbar{position:relative;z-index:2;border-color:#b09b7638;background:transparent;height:90px}
.home-view{position:relative;isolation:isolate;min-height:calc(100svh - 90px);display:flex;flex-direction:column}
.lobby-art{position:absolute;z-index:-2;inset:-105px calc(-1 * clamp(20px,4.5vw,80px)) 0;background:url('assets/lobby-scene.png') center center/cover no-repeat;animation:lobby-scene-in 1.4s ease-out both}
.lobby-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f6f0e53d 0%,transparent 60%),linear-gradient(0deg,#f5f0e5 0%,#f5f0e5ed 9%,transparent 24%)}
.lobby-content{padding:clamp(35px,5vh,65px) 0 30px;max-width:660px;flex:1}
.lobby-overline{display:flex;align-items:center;gap:13px;color:#687163;font-size:11px;letter-spacing:4px;animation:lobby-rise .65s .08s both}
.lobby-overline>span{width:25px;height:1px;background:var(--jade)}
.lobby-title-row{display:flex;align-items:center;gap:18px;margin-top:22px;animation:lobby-rise .75s .16s both}
.lobby-title-row h1{font-family:KaiTi,STKaiti,"Kaiti SC",var(--serif);font-size:clamp(64px,7.5vw,116px);font-weight:700;line-height:1.2;letter-spacing:.025em;color:#202c25;margin:0;text-shadow:1px 1px #30402b12}
.lobby-seal{font-family:var(--serif);color:var(--red);font-size:12px;line-height:1.5;letter-spacing:2px;writing-mode:vertical-rl;border:1px solid #ae503f8c;padding:8px 4px;border-radius:2px;transform:rotate(3deg)}
.lobby-english{font-family:Georgia,serif;font-size:11px;letter-spacing:6px;margin:12px 0 25px 4px;color:#606457;animation:lobby-rise .65s .22s both}
.lobby-motto{font-family:var(--serif);font-size:clamp(24px,2.3vw,34px);letter-spacing:6px;margin:0 0 17px;animation:lobby-rise .65s .28s both}
.lobby-description{font-size:12px;line-height:1.95;color:#777b6b;letter-spacing:1.5px;margin:0 0 31px;animation:lobby-rise .65s .34s both}
.lobby-actions{display:flex;flex-direction:column;gap:12px;width:min(370px,100%);animation:lobby-rise .7s .4s both}
.lobby-play{position:relative;display:flex;align-items:center;gap:18px;width:100%;padding:17px 23px;min-height:79px;border:1px solid #a99156;background:#28594c;color:#fffae8;border-radius:3px;box-shadow:inset 0 0 0 4px #315e50, inset 0 0 0 5px #d8c79544,0 6px 18px #35452b15;transition:transform .22s,background .22s,box-shadow .22s;text-align:left}
.lobby-play:hover{transform:translateY(-3px);background:#204e41;box-shadow:inset 0 0 0 4px #315e50,inset 0 0 0 5px #d8c79577,0 10px 22px #35452b25}
.lobby-play>span:nth-child(2){font-family:var(--serif);font-size:23px;letter-spacing:4px;line-height:1.15}
.lobby-play small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:2px;opacity:.65;margin-top:4px;line-height:1.4}
.lobby-button-glyph{font-family:var(--serif);font-size:28px;opacity:.6;border-right:1px solid #fff9d630;padding-right:17px}
.lobby-arrow{margin-left:auto;font-size:24px;font-weight:300;transition:transform .2s}
.lobby-play:hover .lobby-arrow{transform:translate(2px,-2px)}
.lobby-play.secondary{color:#3b5043;background:#f7f2e4cc;border-color:#b2a07b;box-shadow:inset 0 0 0 4px #f4efdf,inset 0 0 0 5px #c0ad8260;backdrop-filter:blur(8px)}
.lobby-play.secondary:hover{background:#fff9ed}
.lobby-play.secondary .lobby-button-glyph{border-color:#66725b40}
.lobby-links{display:flex;align-items:center;gap:22px;width:min(370px,100%);padding:20px 4px 0;animation:lobby-rise .7s .46s both}
.lobby-links button{font-size:12px;letter-spacing:2px;color:#526050;padding:5px 0;background:none;border:0}
.lobby-links button span{margin-left:12px;opacity:.6}
.lobby-links button:hover{color:var(--jade-dark)}
.lobby-links i{width:1px;height:13px;background:#afaa93}
#lobby-continue{min-height:29px;margin-top:14px}
#lobby-continue:empty{display:none}
.home-view.has-resume .lobby-description{display:none}
.lobby-resume{display:flex;align-items:center;gap:12px;font-size:11px;background:#f8f4e5c9;border:1px solid #b7b49773;border-radius:3px;padding:11px 15px;width:min(370px,100%);color:#526050;text-align:left;animation:lobby-rise .5s both}
.lobby-resume span:last-child{margin-left:auto;color:var(--jade-dark)}
.lobby-inscription{position:absolute;right:0;top:40px;writing-mode:vertical-rl;font-family:var(--serif);font-size:15px;line-height:2.2;letter-spacing:5px;color:#354032}
.lobby-inscription>span{display:block;border:1px solid #ae503f8c;font-size:12px;color:var(--red);padding:3px 1px;margin-top:15px;line-height:1.5;letter-spacing:0}
.lobby-footer{position:relative;padding:12px 0 16px;animation:lobby-rise .75s .52s both}
.lobby-facts{display:flex;gap:clamp(36px,5vw,80px);border-top:1px solid #bcb1937d;padding-top:18px;width:min(660px,100%)}
.lobby-facts>span{font-size:12px;letter-spacing:1px;color:#4f5849;position:relative;line-height:1.3}
.lobby-facts>span+span:before{content:"";position:absolute;left:calc(-1 * clamp(18px,2.5vw,40px));height:30px;top:4px;width:1px;background:#c1b69c80}
.lobby-facts b{font-size:29px;font-family:Georgia,serif;font-weight:400;margin-right:6px;color:#364134;line-height:1}
.lobby-facts small{display:block;margin-top:4px;font-size:9px;color:#878674;letter-spacing:1.5px}
.lobby-footnote{display:flex;gap:24px;justify-content:space-between;margin-top:18px;color:#898978;font-size:9px;letter-spacing:1px}
.lobby-footnote>span:nth-child(2){margin-left:auto}
.lobby-footnote button{border:0;background:none;padding:0;color:#6d7461;font-size:10px}
@keyframes lobby-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes lobby-scene-in{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}

.online-heading{padding:40px 0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.online-heading h1{font-family:var(--serif);font-size:38px;letter-spacing:5px;margin:6px 0 10px}
.online-heading p{font-size:12px;color:#7c8172;line-height:1.8}
.online-layout{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(380px,1.15fr);gap:clamp(36px,7vw,110px);max-width:1080px;margin:42px auto 50px}
.online-setup label{display:block;margin-bottom:22px}
.online-setup .field-label{margin-bottom:9px;display:block}
.online-setup .select-control{width:100%}
.online-node-note{font-size:10px;color:#8b8d7b;line-height:1.8;margin-top:9px;overflow-wrap:anywhere}
.online-setup h2,.online-room h2{font-size:23px;font-family:var(--serif);letter-spacing:2px;margin:0 0 25px}
.online-room{border-left:1px solid var(--line);padding-left:clamp(25px,4vw,65px)}
.online-room p{font-size:12px;line-height:1.9;color:#7b806e}
.online-room .button{min-height:46px}
.online-divider{display:flex;align-items:center;gap:16px;font-size:10px;color:#a19b87;letter-spacing:2px;margin:27px 0}
.online-divider:before,.online-divider:after{content:"";height:1px;flex:1;background:var(--line)}
.online-join-row{display:flex;gap:10px;align-items:stretch}
.online-code-input{letter-spacing:3px;text-transform:uppercase;min-width:0;flex:1}
.online-room-code{font-family:Georgia,serif;font-size:clamp(28px,3.5vw,44px);letter-spacing:4px;color:#2d604e;margin:14px 0 20px;overflow-wrap:anywhere;user-select:all}
.online-state{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.7;color:var(--jade-dark);margin:15px 0}
.online-state:before{content:"";width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#5e9675}
.online-state.waiting:before{background:#b59659;animation:online-pulse 1.5s ease-in-out infinite}
.online-state.failed{color:#a94f3b}.online-state.failed:before{background:#af4d3c;animation:none}
.online-room-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.online-rule-note{font-size:10px!important;border-top:1px solid var(--line);padding-top:20px;margin-top:28px!important}
.online-seats{display:flex;gap:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:20px 0}
.online-seats>div{display:flex;align-items:center;gap:10px;flex:1;font-size:12px}.online-seats small{display:block;font-size:9px;color:#91917b;margin-top:4px}
.online-match-bar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:11px 15px;border:1px solid #bccbb6;background:#edf1e4d9;border-radius:5px;margin:0 0 16px;font-size:10px}
.online-match-bar .online-state{margin:0;font-size:11px}
.online-match-bar .online-match-node{color:#818572;margin-right:auto}
.online-match-bar button{font-size:10px;color:var(--jade-dark);background:none;border:0;padding:4px}
.online-match-bar.paused{border-color:#d6bf8d;background:#f6efdf}
.online-link-copy{width:100%;font-size:12px;border:1px solid var(--line);background:var(--paper);border-radius:4px;padding:12px;color:var(--ink);resize:none;line-height:1.7}
@keyframes online-pulse{50%{opacity:.35}}
@media(min-width:1500px){.lobby-art{background-position:center 58%}.lobby-content{padding-top:clamp(60px,8vh,105px)}}
@media(max-width:1000px){.lobby-title-row h1{font-size:80px}.lobby-content{max-width:500px}.lobby-art{background-position:58% center}.lobby-art:after{background:linear-gradient(90deg,#f6f0e5b8 0%,#f6f0e570 32%,transparent 70%),linear-gradient(0deg,#f5f0e5 0%,#f5f0e5e6 10%,transparent 26%)}.online-layout{gap:35px}}
@media(max-width:730px){
  .at-home #app{padding:0 21px}.at-home .topbar{height:77px}.at-home .brand-title{font-size:21px}.at-home .main-nav{gap:1px}.at-home .nav-item{font-size:12px;min-width:53px}.at-home .nav-item:after{bottom:-16px}
  .home-view{min-height:calc(100svh - 77px)}.lobby-art{inset:-78px -21px 0;background-size:auto 100%;background-position:57% center}.lobby-art:after{background:linear-gradient(90deg,#f6f0e5d9 0%,#f6f0e5ab 50%,#f6f0e55e 100%),linear-gradient(0deg,#f5f0e5 0%,#f5f0e5e6 15%,transparent 48%)}
  .lobby-content{padding:42px 0 15px;max-width:100%}.lobby-overline{font-size:9px;letter-spacing:3px}.lobby-title-row{gap:10px;margin-top:18px}.lobby-title-row h1{font-size:clamp(53px,13.8vw,88px)}.lobby-seal{font-size:9px;padding:6px 2px;letter-spacing:1px}.lobby-english{font-size:9px;letter-spacing:4px;margin:10px 0 24px}.lobby-motto{font-size:23px;letter-spacing:3px}.lobby-description{font-size:10px;margin-bottom:27px;line-height:1.9}
  .lobby-actions{width:min(330px,90%)}.lobby-play{padding:13px 18px;min-height:70px}.lobby-play>span:nth-child(2){font-size:21px}.lobby-play small{font-size:8px}.lobby-button-glyph{font-size:25px}.lobby-links{width:90%;gap:19px;padding-top:15px}.lobby-links button{font-size:11px}.lobby-inscription{display:none}
  .lobby-footer{padding:12px 0 18px}.lobby-facts{padding-top:17px;justify-content:space-between;gap:20px}.lobby-facts>span{font-size:9px;letter-spacing:0}.lobby-facts b{font-size:24px;margin-right:3px}.lobby-facts small{font-size:8px;letter-spacing:.4px}.lobby-facts>span+span:before{left:-12px}.lobby-footnote{margin-top:20px;font-size:8px;letter-spacing:.5px;gap:12px}.lobby-footnote>span:first-child{display:none}.lobby-footnote>span:nth-child(2){margin-left:0;margin-right:auto}.lobby-resume{font-size:10px;max-width:90%;padding:9px 11px}
  .online-heading{padding:27px 0 18px;align-items:flex-start}.online-heading h1{font-size:28px}.online-heading p{font-size:10px}.online-heading>.button{font-size:10px;padding:8px 10px;white-space:nowrap}
  .online-layout{display:flex;flex-direction:column;margin:25px 0;gap:24px}.online-setup h2,.online-room h2{font-size:20px;margin-bottom:17px}.online-setup label{margin-bottom:16px}.online-room{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}.online-setup .select-control{font-size:13px;min-height:44px}.online-room p{font-size:11px}.online-code-input{font-size:14px;min-height:46px}.online-match-bar{gap:8px 12px;padding:10px}.online-match-bar .online-match-node{font-size:9px}.online-room-code{font-size:34px;letter-spacing:3px}
}
@media(max-width:380px){.at-home #app{padding:0 16px}.lobby-art{left:-16px;right:-16px}.at-home .brand-title{font-size:18px}.at-home .brand-seal{width:28px;height:33px;font-size:23px}.at-home .nav-item{font-size:11px;min-width:47px}.lobby-content{padding-top:31px}.lobby-title-row h1{font-size:50px}.lobby-motto{font-size:21px}.lobby-actions{width:95%}.lobby-facts{gap:15px}}
@media(max-height:800px) and (min-width:731px){.lobby-content{padding-top:30px;padding-bottom:10px}.lobby-title-row{margin-top:15px}.lobby-title-row h1{font-size:83px}.lobby-description{margin-bottom:20px}.lobby-english{margin-bottom:18px}.lobby-play{min-height:68px;padding-top:12px;padding-bottom:12px}.lobby-footer{padding-top:12px;padding-bottom:12px}.lobby-facts{padding-top:14px}.lobby-footnote{margin-top:18px}}
@media(max-height:800px) and (min-width:731px){.lobby-content{padding-top:22px;padding-bottom:6px}.lobby-overline{font-size:10px}.lobby-title-row{margin-top:12px}.lobby-title-row h1{font-size:72px}.lobby-english{font-size:10px;margin-top:8px;margin-bottom:16px}.lobby-motto{font-size:25px;margin-bottom:10px}.lobby-description{font-size:10px;line-height:1.8;margin-bottom:18px}.lobby-actions{gap:10px}.lobby-play{min-height:61px;padding:10px 20px}.lobby-play>span:nth-child(2){font-size:21px}.lobby-play small{font-size:8px}.lobby-links{padding-top:12px}.lobby-links button{font-size:11px}.lobby-footer{padding-top:8px;padding-bottom:12px}.lobby-facts{padding-top:13px}.lobby-facts b{font-size:25px}.lobby-footnote{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.lobby-art,.lobby-content *,.lobby-footer,.online-state:before{animation:none!important;transition:none!important}}