:root{--paper:#f3f0e8;--ink:#263c33;--muted:#798078;--green:#315b49;--line:#dadbd0;--gold:#b38744;--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b18c4c;outline-offset:4px}[hidden]{display:none!important}
.site-header{height:98px;max-width:1400px;margin:auto;padding:0 56px;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-family:var(--serif);font-size:39px;font-weight:bold;letter-spacing:-2px;display:flex;align-items:center;gap:10px}.brand-mark{font-family:var(--sans);font-size:37px;font-weight:400;letter-spacing:0}.brand-dot{color:var(--gold);margin-left:-10px}.header-caption{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:28px}.connection{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:7px}.connection:before{content:'';width:6px;height:6px;background:#bd9753;border-radius:50%}.connection.online:before{background:#508f68}
main{max-width:1400px;margin:0 auto;padding:0 56px}.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:12px;align-items:center;min-height:525px;padding:44px 0 35px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.1px;margin:0 0 17px;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-family:var(--serif);font-size:clamp(44px,5.5vw,74px);font-weight:400;line-height:1.08;letter-spacing:-2.7px;margin-bottom:24px}h1 em{font-weight:400;color:var(--green)}.intro{font-size:15px;line-height:1.8;color:#727b70;margin-bottom:30px}.hero-board{margin-right:-26px;transform:translateY(4px)}.hero-board .board-svg{width:100%;display:block}.create-form{max-width:470px}.create-form label{display:block;font-size:11px;font-weight:600;margin-bottom:8px}.input-row{display:flex;gap:8px}.input-row input{min-width:0;flex:1;border:1px solid #cfd3c5;background:#faf9f3;padding:13px 14px;border-radius:6px;font-size:12px;color:var(--ink)}input::placeholder{color:#9a9e91}.button{display:inline-flex;align-items:center;justify-content:center;gap:17px;border:1px solid transparent;border-radius:6px;padding:12px 17px;font-size:12px;font-weight:600;transition:background .15s,transform .15s;white-space:nowrap;text-decoration:none}.button:not(:disabled):active{transform:translateY(1px)}.primary{background:var(--green);color:#fff9e9}.primary:not(:disabled):hover{background:#244837}.secondary{border-color:#cdd0c2;background:transparent}.secondary:hover{background:#e7e9df}.button:disabled{opacity:.55}.help{font-size:10px;color:#8c9386;margin-top:9px}.rooms-section{border-top:1px solid var(--line);padding:32px 0}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.section-heading .eyebrow{margin-bottom:7px}h2{font-family:var(--serif);font-size:28px;font-weight:400;margin-bottom:0;letter-spacing:-.5px}.count{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 11px}.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.room-card{position:relative;display:block;padding:22px;border:1px solid var(--line);border-radius:9px;text-decoration:none;background:#f8f7f0;transition:background .15s,border-color .15s}.room-card:hover{background:#fffdf6;border-color:#9cae9b}.room-card h3{font-family:var(--serif);font-size:23px;font-weight:400;margin:13px 0 10px;overflow-wrap:anywhere;padding-right:20px}.room-card p{font-size:11px;color:var(--muted);margin:0}.room-status{font-size:9px;color:#657257;padding:4px 8px;background:#e8eddd;border-radius:4px}.room-status.playing{color:#3c7050;background:#e1ebde}.room-status.paused{color:#926b2a;background:#eee6d6}.room-status.finished{background:#e7e7e2;color:#777a70}.room-arrow{position:absolute;right:21px;top:50%;font-size:23px;color:#71836a}.empty-rooms{grid-column:1/-1;border:1px dashed #cbd2c2;border-radius:8px;text-align:center;padding:24px}.empty-rooms h3{font-family:var(--serif);font-size:23px;font-weight:400;margin:0 0 6px}.empty-rooms p{font-size:12px;color:var(--muted);margin:0}.rooms-note{font-size:10px;color:#939889;margin:16px 0 0}.rule-teasers{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding:35px 0 45px;gap:45px}.rule-teasers span{font-family:var(--serif);font-size:15px;color:#9aa08f}.rule-teasers h3{font-size:13px;font-weight:600;margin:9px 0 7px}.rule-teasers p{font-size:12px;line-height:1.7;color:var(--muted);margin:0;max-width:300px}
.game{padding-top:28px}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:22px}.back{font-size:11px;color:var(--muted);text-decoration:none}.back:hover{color:var(--green)}.game-heading h1{font-size:37px;letter-spacing:-1px;margin:7px 0 10px;overflow-wrap:anywhere}.game-heading>div{min-width:0}.game-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:10px;padding-bottom:23px;border-bottom:1px solid var(--line);flex-wrap:wrap}.role-badge{border-radius:4px;padding:4px 9px;background:#e3e8d9;color:#50654d}.meta-divider{height:12px;width:1px;background:var(--line)}.play-table{display:grid;grid-template-columns:185px minmax(0,1fr) 185px;gap:10px;align-items:start;padding:26px 0 20px}.reserve{padding-top:17px}.reserve-heading{display:flex;align-items:baseline;justify-content:space-between;gap:5px}.reserve-heading h3{font-family:var(--serif);font-weight:400;font-size:25px;margin-bottom:10px}.seat-info{font-size:9px;color:var(--muted)}.claim{width:100%;border:1px solid #cbd2c2;background:#ebeede;color:var(--green);padding:10px 8px;font-size:11px}.claim:not(:disabled):hover{background:#dce5cf}.claim.your-seat{border-color:#819877;opacity:1;background:#e0e8d5}.piece-tray{margin-top:17px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.piece-button{min-width:0;padding:3px 2px 6px;border:1px solid transparent;border-radius:7px;background:#e9e8dc;position:relative;transition:background .15s,border-color .15s}.piece-button svg{width:100%;height:87px;display:block}.piece-button:disabled{opacity:.86}.piece-button:not(:disabled):hover{background:#e0e7d3;border-color:#98aa87}.piece-button.selected{background:#dae5c9;border-color:#4f7746;box-shadow:0 0 0 2px #4f774622}.piece-button.used{opacity:.19}.piece-caption{display:block;font-size:8px;color:#77806b;white-space:nowrap}.reserve-count{font-size:10px;text-align:center;color:var(--muted);margin:15px 0 0}.board-column{text-align:center;min-width:0}.round-status{min-height:108px;padding:7px 5px 0}.turn-indicator{display:block;margin:0 auto 8px;width:9px;height:9px;border-radius:50%;background:#adba99}.turn-indicator.white{background:#fff9e6;border:1px solid #b7a683;box-shadow:0 0 0 4px #dcd9c74d}.turn-indicator.black{background:#334b3d;box-shadow:0 0 0 4px #334b3d15}.turn-indicator.finished{background:#b48a40}.round-status h2{font-size:28px;line-height:1.25}.round-status p{font-size:11px;color:var(--muted);margin:9px 0 0}.board{margin:0 -12px}.board-svg{display:block;width:100%;overflow:visible}.tile{fill:#decea9;stroke:#bca079;stroke-width:1.2;transition:fill .15s,stroke .15s}.board-cell:nth-of-type(even) .tile{fill:#e6d7b7}.socket{fill:#b99c70;stroke:#f3e3bf;stroke-width:1;opacity:.5}.cell-label{fill:#9c835d;text-anchor:middle;font-family:var(--sans);font-size:10px;opacity:.65;pointer-events:none}.board-cell.available{cursor:pointer;outline:none}.board-cell.available .tile{fill:#d5dcc0;stroke:#789264;stroke-width:2}.board-cell.available:hover .tile,.board-cell.available:focus .tile{fill:#b4c9a2;stroke:#315b49;stroke-width:3}.board-cell.winning .tile{fill:#dbc27b;stroke:#a98135;stroke-width:3}.board-figures,.win-line{pointer-events:none}.win-line{stroke:#9d702d;stroke-width:7;stroke-linecap:round;opacity:.6}.selection{font-size:10px;color:#7c846f;min-height:30px;margin:6px 0 7px;padding:0 15px}.rules{border-top:1px solid var(--line);margin-top:12px}.rules summary{cursor:pointer;display:flex;justify-content:space-between;padding:20px 0;font-size:12px;font-weight:550;list-style:none}.rules summary::-webkit-details-marker{display:none}.rules summary span{font-size:20px;font-weight:400}.rules[open] summary span{transform:rotate(45deg)}.rules-content{max-width:820px;padding-bottom:25px;color:var(--muted);font-size:12px;line-height:1.8}.rules-content strong{color:var(--ink)}.trait-legend{display:flex;gap:24px}.trait-legend>div{display:flex;align-items:center;gap:9px;font-size:10px}.trait-legend svg{width:45px;height:75px;flex-shrink:0}
footer{max-width:1400px;margin:30px auto 0;padding:24px 56px 30px;display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);font-size:10px;color:#929888}footer>a{font-family:var(--serif);font-size:22px;letter-spacing:-1px;text-decoration:none;color:var(--ink)}footer>span:last-child{margin-left:auto}.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:10;max-width:min(560px,90vw);padding:15px 22px;background:#294d3d;color:#fff8e6;border-radius:8px;box-shadow:0 5px 25px #0002;font-size:12px}.toast.error{background:#804c39}
@media(min-width:1500px){.play-table{grid-template-columns:210px minmax(0,1fr) 210px}.piece-button svg{height:99px}.board{margin:-8px -15px 0}}
@media(max-width:1050px){main{padding:0 28px}.site-header{padding:0 28px}.hero{grid-template-columns:1fr 1fr}.hero-copy h1{font-size:55px}.input-row{flex-wrap:wrap}.input-row input{flex-basis:220px}.hero-board{margin:0 -12px}.play-table{grid-template-columns:145px minmax(0,1fr) 145px;gap:6px}.piece-button svg{height:72px}.piece-caption{font-size:7px}.reserve-heading{display:block}.reserve-heading h3{margin-bottom:0}.seat-info{display:block;margin-bottom:10px}.round-status h2{font-size:25px}.round-status p{font-size:10px}.trait-legend{gap:10px;flex-wrap:wrap}footer{padding:24px 28px}}
@media(max-width:720px){.site-header{height:75px;padding:0 20px;gap:15px}.brand{font-size:32px}.brand-mark{font-size:31px}.header-caption{display:none}main{padding:0 20px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:35px;gap:0}.hero-copy h1{font-size:54px}.hero-board{max-width:490px;align-self:center;width:100%;margin:-10px 0 -5px}.intro{font-size:14px}.create-form{max-width:none}.input-row{flex-wrap:nowrap}.input-row input{flex-basis:auto}.input-row .button{padding:12px}.rooms{grid-template-columns:repeat(2,minmax(0,1fr))}.room-card{padding:17px}.room-card h3{font-size:21px}.room-card p{font-size:10px}.room-arrow{right:14px}.rule-teasers{gap:20px}.rule-teasers p{font-size:11px}.game-heading{align-items:flex-start}.game-heading h1{font-size:30px}.game-heading .button{font-size:10px;padding:10px;gap:6px;margin-top:13px}.game-meta{gap:9px;font-size:9px}.game-meta>span:last-child{display:none}.play-table{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;position:relative;padding-top:19px}.board-column{grid-row:1;grid-column:1/-1}.board{max-width:630px;margin:-13px auto 0}.round-status{min-height:98px}.selection{margin-top:-5px;min-height:20px}.reserve{grid-row:2;padding-top:8px;border-top:1px solid var(--line)}.reserve-heading{display:flex;align-items:center}.reserve-heading h3{font-size:24px}.seat-info{margin-bottom:0}.claim{margin-top:8px}.piece-tray{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px}.piece-button svg{height:70px}.piece-caption{display:none}.reserve-count{font-size:9px;margin-top:10px}.rules{margin-top:12px}footer{padding:20px;flex-wrap:wrap;gap:10px 16px;margin-top:18px}footer>span:last-child{margin-left:0;flex-basis:100%;font-size:9px}.trait-legend>div{max-width:45%}}
@media(max-width:430px){.rooms{grid-template-columns:1fr}.hero-copy h1{font-size:48px}.eyebrow{font-size:8px;letter-spacing:1.8px}.rule-teasers{grid-template-columns:1fr;gap:20px}.rule-teasers>div{display:grid;grid-template-columns:24px 1fr;gap:0 9px}.rule-teasers h3{margin-top:1px}.rule-teasers p{grid-column:2;max-width:none}.game-heading .button{max-width:115px;white-space:normal;text-align:left}.piece-button svg{height:60px}.reserve-heading h3{font-size:22px}.seat-info{font-size:8px}.claim{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}