@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');
:root{--bg:#f7f8f4;--ink:#233e35;--muted:#89938a;--green:#2c624c;--line:#e3e7df;--gold:#ae8a4b}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif;color:var(--ink);font-size:14px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:.2s}button:disabled{cursor:default;opacity:.45}button:hover:not(:disabled){filter:brightness(.94)}a{text-decoration:none;color:inherit}[hidden]{display:none!important}header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 max(5%,calc((100vw - 1280px)/2));background:#fffefa;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:650;letter-spacing:2px}.brand-icon{background:var(--green);color:#fff8e7;border-radius:10px;width:42px;height:48px;display:grid;place-items:center;font-family:serif;font-size:30px;box-shadow:0 3px 0 #194735}.brand small{display:block;font-size:8px;letter-spacing:3px;color:#829386;margin-top:3px}nav{display:flex;gap:32px;height:100%;align-items:center}nav button{height:100%;background:none;border:0;color:var(--muted);padding:0 5px;position:relative}.nav-active{color:var(--green);font-weight:600}.nav-active:after{content:'';height:3px;background:var(--green);position:absolute;bottom:0;left:0;right:0}.account{display:flex;gap:15px;align-items:center;font-size:13px}.account a,.account button{border:1px solid #d3ded4;background:transparent;border-radius:7px;padding:9px 17px}#accountUser{display:flex;align-items:center;gap:7px}main{max-width:1280px;margin:auto;padding:0 32px}.hero{display:flex;justify-content:space-between;align-items:center;min-height:360px;padding:50px 38px 40px 15px}.eyebrow{font-size:12px;color:#7c927c;letter-spacing:3px;display:flex;align-items:center;gap:9px}.eyebrow span,.live span:first-child{height:6px;width:6px;border-radius:50%;background:#638a61;display:inline-block}h1{font-family:'Noto Serif SC',serif;font-size:43px;letter-spacing:3px;margin:18px 0;color:#244e3b;font-weight:600}.hero p{color:#849083;font-size:14px;letter-spacing:1px;line-height:1.8}.hero-actions{display:flex;gap:12px;margin:26px 0 23px}.primary,.secondary{padding:12px 22px;border-radius:7px;font-weight:500;border:1px solid #d7dfd3}.primary{color:#fff;background:var(--green);border-color:var(--green);box-shadow:0 4px 12px #2c624c16}.secondary{background:#fffefa;color:#45614f}.hero-note{display:flex;gap:24px;color:#8c9988;font-size:11px}.hero-art{width:380px;height:280px;position:relative;flex-shrink:0}.art-circle{width:260px;height:260px;border:1px solid #e3e7d9;border-radius:50%;position:absolute;right:45px;top:0;background:radial-gradient(circle,#e8eddf88,transparent 70%)}.art-circle:after{content:'';position:absolute;inset:25px;border:1px dashed #d7decf;border-radius:50%}.art-tile{position:absolute;width:97px;height:135px;background:linear-gradient(120deg,#fffefa,#eeeede);border:1px solid #d4d8c7;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:serif;font-size:64px;box-shadow:4px 9px 0 #b8c9b3,5px 18px 27px #294a2825}.art-tile small{font:8px system-ui;letter-spacing:2px;margin-top:5px}.tile-one{color:#377451;left:56px;top:72px;transform:rotate(-19deg)}.tile-two{color:#ab5245;left:148px;top:45px;transform:rotate(8deg);z-index:2}.tile-three{color:#3a5d47;left:232px;top:85px;transform:rotate(23deg)}.tile-three small{font-size:30px}.art-label{position:absolute;bottom:0;right:90px;color:#849578;letter-spacing:5px;font-family:serif}.directory{border-top:1px solid var(--line);padding-top:30px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading h2{font-size:21px;margin:0;font-weight:600}.section-heading h2 span{font-size:11px;background:#eaf0e6;color:#73896c;padding:5px 9px;border-radius:4px;margin-left:12px;font-weight:400}.section-heading p{color:var(--muted);font-size:12px;margin:10px 0 20px}.live{display:flex;gap:7px;color:#7b8f77;font-size:11px}.toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:22px;padding:0 0 16px}.tabs{display:flex;gap:8px}.tabs button{border:0;background:transparent;color:#91998e;border-radius:6px;padding:9px 17px}.tabs button.active{background:#e8eee2;color:#406744;font-weight:600}.search{border:1px solid var(--line);background:#fffefa;padding:8px 12px;border-radius:6px;color:#909b8a;display:flex;gap:8px;align-items:center;font-size:20px}.search input{background:none;border:0;outline:0;font-size:12px;width:210px;color:var(--ink)}.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-height:190px}.room-card{border:1px solid var(--line);background:#fffefa;border-radius:10px;padding:22px;box-shadow:0 3px 7px #1d432805}.card-top{display:flex;align-items:center;justify-content:space-between}.badge{font-size:10px;background:#eef1e7;color:#6c8354;padding:5px 9px;border-radius:4px}.badge.jp{background:#f1e9e5;color:#a27966}.card-top small{color:#8f9a86;font-size:10px}.room-card h3{margin:17px 0 8px;font-size:17px;font-weight:600}.room-card p{font-size:11px;color:#899586;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-people{border-top:1px dashed var(--line);padding-top:16px;margin-top:17px;display:flex;justify-content:space-between;color:#82907d;font-size:12px}.card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.card-bottom small{font-size:11px;color:#9aa391}.card-bottom button{padding:8px 14px;font-size:12px}.empty{grid-column:1/-1;border:1px dashed #dce3d4;border-radius:10px;padding:27px;text-align:center;color:#8a9884;background:#fffefa80}.empty strong{display:block;color:#60795d;font-size:16px;margin:9px}.empty p{font-size:12px}.empty button{padding:9px 17px}.features{display:grid;grid-template-columns:repeat(3,1fr);padding:29px 0;margin:32px 0 10px;border-top:1px solid var(--line);gap:20px}.features article{display:flex;gap:14px;align-items:center}.features article>span{width:42px;height:42px;display:grid;place-items:center;font-size:25px;color:#7c9768;background:#eaf0e1;border-radius:9px}.features h3{font-size:13px;font-weight:500;margin:0 0 7px}.features p{font-size:10px;color:#969e8f;margin:0}footer{max-width:1216px;margin:0 auto;padding:25px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#a1a89a;font-size:10px}footer b{padding:0 8px}dialog{border:1px solid #dbe2d6;border-radius:15px;padding:28px;width:470px;max-width:calc(100vw - 30px);color:var(--ink);background:#fffefa;box-shadow:0 20px 100px #18332322}dialog::backdrop{background:#1a312b66;backdrop-filter:blur(3px)}.modal-heading{display:flex;align-items:center;justify-content:space-between}.modal-heading h2{font-family:serif;margin:0;font-size:23px}.close{background:none;border:0;font-size:26px;color:#8f9b8a}.muted{color:#8a9683;font-size:12px;line-height:1.7}form label{display:block;font-size:12px;margin:15px 0}form input,form select,form textarea{display:block;width:100%;margin-top:8px;padding:11px;border:1px solid #dce2d6;border-radius:6px;color:var(--ink);background:#fafbf6;outline-color:#68885c}textarea{resize:vertical;min-height:70px}.form-row{display:flex;gap:15px}.form-row label{flex:1;margin:0}.full{width:100%;margin-top:9px}.rules{line-height:1.9;font-size:13px;max-height:65vh;overflow:auto;color:#6a7c64}.rules h3{color:var(--ink)}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#274c3e;color:white;border-radius:9px;padding:13px 22px;z-index:100;box-shadow:0 5px 20px #0002;max-width:90vw}.room-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 22px}.room-heading h1{font-size:28px;margin:9px 0}.room-info{background:#fffefa;border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:20px}.info-top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px}.info-top button{border:0;background:none;color:#82907b;font-size:12px}.players{display:flex;gap:12px;margin:15px 0;flex-wrap:wrap}.player{display:flex;align-items:center;gap:9px;background:#f2f5eb;border:1px solid #e3e9da;border-radius:8px;padding:10px 14px;min-width:155px}.avatar{width:30px;height:30px;border-radius:50%;background:#dce6d2;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;color:#6a835b;flex-shrink:0}.player small{display:block;color:#8a987f;font-size:10px;margin-top:3px}.room-tools{display:flex;gap:10px}.room-tools button{padding:9px 15px;font-size:12px}#roomDescription{color:#8a9881;font-size:12px}#spectatorList{margin-top:15px;color:#7f8f76;font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.spectator button{font-size:11px;border:1px solid #d9e2ce;background:white;border-radius:4px;margin-left:6px;padding:4px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:20px;margin-bottom:30px}.table-area{background:#2f5b48;border:8px solid #e3dac4;border-radius:18px;overflow:hidden;box-shadow:0 3px 0 #c8bfa9;color:#ebf1e5}.table-status{display:flex;justify-content:space-between;padding:15px 18px;font-size:12px;background:#244a3c}.board{min-height:320px;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px;background:radial-gradient(ellipse,#416b53,#2e5946)}.seat-board{border:1px solid #b5c5a525;border-radius:8px;padding:12px;min-width:0}.seat-name{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:10px}.seat-name.active{color:#f0d398}.seat-name .avatar{width:23px;height:23px;font-size:10px}.mini-hand,.discards,.melds{display:flex;gap:3px;flex-wrap:wrap;min-height:26px;margin:6px 0}.tile{background:linear-gradient(#fffef4,#eae9d7);color:#2d6048;border:1px solid #c6c7ad;border-radius:4px;box-shadow:0 3px 0 #bacbb1;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:serif;font-weight:bold;line-height:1;width:42px;height:59px;font-size:22px;padding:3px;flex-shrink:0}.tile.red{color:#ae4e40}.tile small{font-size:11px;margin-top:5px}.tile.back{background:linear-gradient(120deg,#7e9d70,#567b52);border-color:#afc69d;box-shadow:0 2px 0 #416941}.mini-hand .tile{width:13px;height:21px;border-radius:2px}.discards .tile,.melds .tile{width:26px;height:35px;font-size:15px;box-shadow:0 2px 0 #bbc9aa}.discards .tile small,.melds .tile small{font-size:8px;margin-top:2px}.melds>span{display:flex;gap:1px;margin-right:6px}.hand-area{background:#244d3c;padding:17px 18px;min-height:160px}.hand-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:13px;color:#c0d0b4}.hand{display:flex;gap:5px;overflow-x:auto;padding:0 3px 10px;min-height:72px}.hand .tile{cursor:pointer}.hand .tile.selected{transform:translateY(-6px);outline:2px solid #e4c57d;box-shadow:0 4px 0 #e4c57d}.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.actions button{border:1px solid #9eaf8e;background:#f1eddd;color:#3d5e41;padding:8px 13px;border-radius:5px;font-size:12px}.actions button.action-primary{background:#d9bf7d;border-color:#d9bf7d;color:#3a4930}aside{border:1px solid var(--line);border-radius:10px;background:#fffefa;overflow:hidden;display:flex;flex-direction:column}.side-tabs{display:flex;border-bottom:1px solid var(--line)}.side-tabs button{flex:1;background:none;border:0;padding:15px 8px;color:#97a18d;font-size:12px}.side-tabs button.active{color:#456c48;border-bottom:2px solid #456c48}.messages{height:330px;overflow:auto;padding:16px;flex:1;min-height:260px;max-height:460px}.message{margin:0 0 15px;font-size:12px;color:#657b5f;overflow-wrap:anywhere}.message strong{font-size:10px;color:#97a18d;display:flex;gap:5px;align-items:center;margin-bottom:5px}.message .avatar{width:18px;height:18px;font-size:8px}#chatForm{display:flex;margin:10px;gap:4px}#chatForm input{margin:0;min-width:0;font-size:11px;padding:9px}#chatForm button{border:0;background:#e7edde;color:#597950;border-radius:5px}.side-note{font-size:10px;color:#a1ab97;text-align:center;padding:12px;line-height:1.8;border-top:1px solid var(--line)}#invitation{background:#eee8cd;padding:15px;margin-bottom:16px;border-radius:8px}#invitation button{margin-left:8px;padding:6px 12px}.board-empty{grid-column:1/-1;text-align:center;align-self:center;color:#c0d0b5;line-height:2}.board-empty strong{display:block;font-family:serif;font-size:25px;margin-bottom:10px}.result{grid-column:1/-1;background:#e4d6ac;color:#38523c;padding:18px;border-radius:8px;text-align:center}.result .hand{justify-content:center;margin-top:15px}
@media(min-width:1500px){.hero{min-height:400px}.room-grid{min-height:210px}}@media(max-width:900px){header{padding:0 25px}.hero-art{width:300px;transform:scale(.85);transform-origin:right center}.hero{padding:35px 0}h1{font-size:34px}.room-grid{grid-template-columns:repeat(2,1fr)}.features{gap:12px}.features p{line-height:1.7}.game-layout{grid-template-columns:minmax(0,1fr) 220px}.tile{width:36px;height:52px}.hand{gap:3px}footer{margin:0 32px}.brand{font-size:20px}nav{gap:18px}}@media(max-width:650px){header{height:76px;padding:0 16px;flex-wrap:wrap;gap:5px}.brand{font-size:18px;gap:8px}.brand-icon{width:32px;height:39px;font-size:25px}.brand small{font-size:6px}nav{display:none}.account{gap:6px;font-size:11px}.account a,.account button{padding:7px 10px}.account .avatar{width:24px;height:24px}main{padding:0 18px}.hero{min-height:300px;position:relative;padding:35px 0}.hero>div:first-child{position:relative;z-index:2}.hero-art{position:absolute;right:-10px;top:20px;opacity:.18;transform:scale(.7);width:320px}.hero h1{font-size:33px}.hero p{font-size:12px;max-width:290px}.hero-actions button{padding:11px 14px;font-size:12px}.hero-note{font-size:10px;gap:14px}.section-heading h2{font-size:18px}.section-heading p{font-size:11px}.section-heading h2 span{font-size:9px;margin-left:6px}.live{font-size:9px}.toolbar{flex-wrap:wrap;gap:12px}.tabs button{padding:8px 12px;font-size:12px}.search{width:100%}.search input{width:100%}.room-grid{grid-template-columns:1fr}.features{grid-template-columns:1fr;padding:25px 0;gap:22px}.features p{font-size:11px}footer{margin:0 18px;gap:12px;flex-direction:column;padding:20px 0}.room-heading h1{font-size:23px}.room-heading .eyebrow{font-size:10px}.room-heading>button{padding:8px 10px;font-size:11px}.room-info{padding:12px}.info-top{font-size:11px}.info-top button{font-size:10px;white-space:nowrap}.players{gap:7px}.player{min-width:calc(50% - 4px);padding:8px;font-size:12px}.room-tools{flex-wrap:wrap}.game-layout{grid-template-columns:1fr;gap:18px}.board{padding:10px;gap:8px;min-height:300px}.seat-board{padding:8px}.seat-name{font-size:10px}.table-area{border-width:5px}.tile{width:32px;height:46px;font-size:21px}.tile small{font-size:10px}.discards .tile,.melds .tile{width:22px;height:30px;font-size:13px}.hand-area{padding:14px 10px}.table-status{padding:12px;font-size:11px}.messages{height:220px;min-height:180px;max-height:240px}.hand-label{font-size:10px}.result .hand{justify-content:flex-start}.form-row{gap:10px}.room-heading{margin:25px 0 15px}}
@media(max-width:650px){header{height:auto;min-height:76px;padding-top:12px;padding-bottom:12px}.account{flex-wrap:wrap;justify-content:flex-end;max-width:100%}.account .back-online{font-size:10px;padding:7px 9px}}
@media(max-width:650px){.hero-art{overflow:hidden}}