:root { --ease: cubic-bezier(.23,1,.32,1); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color-scheme: light; }
    * { box-sizing: border-box; }
    body { margin: 0; background: #f5f2e9; color: #233c30; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; cursor: pointer; }
    button:active { transform: scale(.97); }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #a58948; outline-offset: 2px; }
    button { transition: transform 150ms var(--ease), background-color 150ms ease; }
    a { color: inherit; text-decoration: none; }
    .explorer { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 66px; padding: 12px 32px; background: #fff; color: #30312f; border-bottom: 1px solid #e8e8e4; }
    .explorer-label { font-size: 12px; font-weight: 600; letter-spacing: -.1px; }
    .explorer-label span { color: #999; font-weight: 400; margin-left: 10px; }
    .directions { display: flex; gap: 5px; padding: 4px; background: #f1f1ee; border-radius: 10px; }
    .directions button { border: 0; background: transparent; border-radius: 7px; padding: 9px 15px; font-size: 12px; color: #73746f; }
    .directions button[aria-pressed="true"] { background: #fff; color: #21251f; box-shadow: 0 1px 4px #00000014; }
    .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: #3e6654; }
    .directions button:nth-child(2) .swatch { background: #b69ae0; }
    .directions button:nth-child(3) .swatch { background: #7777ee; }
    .explorer-hint { font-size: 11px; color: #8c8d87; }
    .site { min-height: calc(100vh - 66px); overflow: hidden; position: relative; --ink: #203b2c; --muted: #758073; --accent: #294e3d; --paper: #f5f2e9; --rail: #795a3e; --rail-edge: #453b2c; --felt: #355d48; --felt-light: #53725a; --tile-back: #386347; --trim: #b9a574; background: var(--paper); color: var(--ink); }
    .nav { height: 88px; margin: 0 5%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; border-bottom: 1px solid #233c3015; }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 15px; letter-spacing: -.5px; }
    .brand-mark { display: grid; place-items: center; width: 31px; height: 37px; border: 1.4px solid currentColor; border-radius: 6px; box-shadow: 2px 2px 0 currentColor; font-family: Georgia,serif; font-size: 23px; }
    .brand small { display: block; font-size: 8px; letter-spacing: 2.8px; font-weight: 500; margin-top: 4px; }
    .nav-links { display: flex; gap: 32px; align-items: center; font-size: 12px; }
    .nav-links button { background: transparent; color: inherit; border: 0; padding: 10px 0; }
    .nav .nav-join { padding: 11px 20px; border: 1px solid #233c3030; border-radius: 30px; margin-left: 17px; }
    .hero { position: relative; min-height: 735px; max-width: 1600px; margin: 0 auto; }
    .copy { position: relative; text-align: center; padding: 40px 24px 0; z-index: 2; pointer-events: none; }
    .copy button { pointer-events: auto; }
    .eyebrow { font-size: 10px; font-weight: 550; letter-spacing: 2.7px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; }
    .eyebrow::before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
    h1 { font-family: Georgia,"Times New Roman",serif; font-weight: 400; font-size: clamp(56px,6vw,86px); line-height: 1.03; letter-spacing: -5px; margin: 17px 0 16px; }
    h1 em { font-weight: 400; }
    .description { margin: 0 auto; font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 365px; }
    .actions { display: flex; justify-content: center; gap: 20px; margin-top: 23px; align-items: center; }
    .primary { border: 0; border-radius: 40px; color: #fff; background: var(--accent); padding: 14px 24px; font-size: 12px; font-weight: 550; display: flex; gap: 10px; align-items: center; }
    .secondary { border: 0; background: transparent; color: var(--ink); font-size: 12px; padding: 14px 4px; }
    .secondary span { margin-left: 9px; }
    .stage { width: 750px; height: 400px; position: absolute; left: 50%; top: 335px; transform: translateX(-50%); perspective: 1500px; }
    .halo { position: absolute; width: 510px; height: 260px; left: 50%; top: 75px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse,#c5c5ad66,transparent 68%); }
    .shadow { position: absolute; width: 460px; height: 170px; top: 227px; left: 145px; border-radius: 50%; background: #384d2940; filter: blur(30px); transform: rotate(-12deg); }
    .island { width: 410px; height: 410px; position: absolute; left: 170px; top: -3px; transform-style: preserve-3d; transform: rotateX(54deg) rotateZ(-27deg); animation: float 9s ease-in-out infinite; }
    @keyframes float { 0%,100% { transform: translateY(0) rotateX(54deg) rotateZ(-27deg); } 50% { transform: translateY(-7px) rotateX(54.5deg) rotateZ(-26.5deg); } }
    .paused .island { animation-play-state: paused; }
    .cube { position: absolute; width: var(--w); height: var(--d); transform-style: preserve-3d; transform: translate3d(var(--x),var(--y),var(--z)); }
    .face { position: absolute; backface-visibility: hidden; }
    .top { width: var(--w); height: var(--d); transform: translateZ(var(--h)); }
    .front { width: var(--w); height: var(--h); top: 100%; transform-origin: top; transform: translateZ(var(--h)) rotateX(-90deg); }
    .back { width: var(--w); height: var(--h); top: 0; transform-origin: top; transform: rotateX(90deg); }
    .right { width: var(--h); height: var(--d); left: 100%; transform-origin: left; transform: translateZ(var(--h)) rotateY(90deg); }
    .left { width: var(--h); height: var(--d); left: 0; transform-origin: left; transform: rotateY(-90deg); }
    .table > .top { background: repeating-linear-gradient(2deg,transparent 0 3px,#ffffff06 4px 5px),linear-gradient(125deg,#ffffff27,transparent 45%),var(--rail); border: 2px solid #c6b38855; border-radius: 19px; box-shadow: inset 0 0 0 7px #ffffff08; }
    .table > .front, .table > .back { background: linear-gradient(var(--rail),var(--rail-edge)); border-bottom: 4px solid var(--rail-edge); border-radius: 0 0 12px 12px; }
    .table > .right, .table > .left { background: linear-gradient(90deg,var(--rail),var(--rail-edge)); border-radius: 0 12px 12px 0; }
    .felt { position: absolute; inset: 25px; transform: translateZ(35px); border-radius: 14px; background: radial-gradient(ellipse at 25% 15%,var(--felt-light),var(--felt) 80%); border: 1px solid var(--trim); box-shadow: inset 0 0 12px #0004,0 0 0 3px #322f2533; }
    .felt::after { content: ''; position: absolute; inset: 16px; border: 1px solid #fff2; border-radius: 8px; }
    .center-mark { position: absolute; left: 157px; top: 159px; width: 96px; height: 96px; transform: translateZ(36px); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e9e6c76b; border: 1px solid #e9e6c72b; border-radius: 50%; font-family: Georgia,serif; font-size: 30px; }
    .center-mark span { font-family: sans-serif; font-size: 5px; letter-spacing: 2px; margin-top: 8px; }
    .tile .top { border-radius: 3px; background: #f9f2de; border: 1px solid #c5c0aa; color: #ad4338; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Georgia,serif; font-size: 13px; font-weight: bold; line-height: 1; box-shadow: inset 0 1px 0 #fff; }
    .tile .front,.tile .back { background: linear-gradient(#e1dbc7 65%,var(--tile-back) 66%); border-radius: 1px; border: .5px solid #a4a28e; }
    .tile .left,.tile .right { background: linear-gradient(90deg,#d2cbb6 65%,var(--tile-back) 66%); border: .5px solid #a4a28e; }
    .tile.hidden .top { background: var(--tile-back); box-shadow: inset 0 0 0 2px #ffffff30; border-color: #334b3d70; }
    .tile.upright .top { background: #faf4e6; }
    .tile.upright .front { background: #f7f0df; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 16px; color: #a53b32; font-family: Georgia,serif; border-radius: 2px; font-weight: bold; }
    .tile.upright .front b { font-size: 10px; }
    .tile.upright .right,.tile.upright .left { background: #ddd4bc; }
    .tile.green .front,.tile.green .top { color: #287055; }
    .tile.blue .front,.tile.blue .top { color: #324f81; }
    .side-note { position: absolute; top: 474px; left: 8%; z-index: 2; width: 160px; }
    .side-note .note-line { width: 34px; height: 1px; background: var(--ink); opacity: .4; margin-bottom: 18px; }
    .side-note strong { display: block; font-size: 11px; font-weight: 550; margin-bottom: 9px; }
    .side-note p { font-size: 10px; color: var(--muted); line-height: 1.8; margin: 0; }
    .edition { position: absolute; top: 500px; right: 7%; font-size: 9px; line-height: 2; letter-spacing: 1.7px; text-transform: uppercase; color: var(--muted); }
    .edition b { display: block; color: var(--ink); font-weight: 500; letter-spacing: .5px; font-size: 11px; }
    .stage-controls { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 9px; color: var(--muted); }
    .motion-toggle { border: 1px solid #77777730; background: transparent; color: var(--ink); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; }
    .bottom-strip { position: relative; margin: 0 5%; padding: 22px 0 26px; border-top: 1px solid #233c3020; display: flex; justify-content: space-between; align-items: center; font-size: 10px; }
    .bottom-strip .modes { display: flex; gap: 26px; color: var(--muted); }
    .bottom-strip .modes button { border: 0; background: transparent; padding: 0; color: inherit; font-size: inherit; }
    .bottom-strip .modes button::before { content: '↗'; margin-right: 7px; opacity: .7; }
    .strip-title { letter-spacing: 1.5px; text-transform: uppercase; font-size: 8px; }
    .theme-note { padding: 15px 5%; background: #fff; color: #75766f; font-size: 11px; line-height: 1.6; display: flex; justify-content: space-between; gap: 20px; }
    .theme-note strong { font-weight: 550; color: #333; }
    /* Warm luxury application */
:root{--ink:#203b2c;--jade:#294e3d;--muted:#626b60;--paper:#f5f2e9;--line:#203b2c20}
body{color:var(--ink);min-width:320px}button,input,select{font:inherit}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.42}input,select{padding:13px 15px;border:1px solid var(--line);border-radius:9px;background:#fcfaf5;color:var(--ink);width:100%}label.field{display:grid;gap:8px;font-size:13px}.site{min-height:100vh;--muted:#626b60}.nav{height:92px}.nav-links{font-size:13px;gap:28px}.nav .nav-join{background:var(--jade);color:#fff;border-color:var(--jade);padding:12px 22px}.account{width:44px;height:44px;border:1px solid var(--line)!important;border-radius:50%;font-size:20px}.hero{min-height:805px}.copy{padding-top:55px}.eyebrow{font-size:10px;letter-spacing:2.2px}h1{font-size:clamp(68px,6.6vw,100px);letter-spacing:-5px;margin:22px 0}.description{font-size:14px;max-width:405px;line-height:1.8}.actions{margin-top:25px}.primary{font-size:13px;padding:15px 25px;min-height:45px}.secondary{font-size:13px}.stage{top:382px;height:410px}.side-note{top:580px;left:8%;width:175px}.side-note strong{font-size:12px}.side-note p{font-size:12px}.edition{top:600px;font-size:10px}.edition b{font-size:12px}.stage-controls{font-size:10px;bottom:0}.motion-toggle{width:30px;height:30px;flex-shrink:0}.bottom-strip{font-size:12px;padding:28px 0}.strip-title{font-size:10px}.bottom-strip .modes{gap:32px}.page{max-width:1400px;margin:auto;padding:64px 6% 100px}.page-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:42px}.kicker{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;font-weight:600;color:#6a796b;margin-bottom:16px}.page h1{font-size:64px;line-height:1.1;letter-spacing:-3px;margin:8px 0 14px}.page h1 em{color:#6d7963}.page-intro{max-width:500px;font-size:14px;color:var(--muted);line-height:1.8;margin:0}.section{padding:108px 6%;max-width:1440px;margin:auto}.section h2{font-family:Georgia,serif;font-size:56px;font-weight:400;letter-spacing:-2px;line-height:1.1;margin:18px 0 24px}.section-header{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:46px}.section-header p{font-size:14px;line-height:1.8;max-width:290px;color:var(--muted)}.play-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}.mode-card{padding:32px;border:1px solid var(--line);border-radius:12px;min-height:235px;background:#f9f7f0;display:flex;flex-direction:column;position:relative;text-align:left;transition:transform 180ms var(--ease),background-color 180ms ease}.mode-card.featured{background:#294e3d;color:#f7f4e9;border-color:#294e3d}.mode-card .index{font-size:11px;opacity:.65;letter-spacing:1px}.mode-card h3{font-family:Georgia,serif;font-size:31px;font-weight:400;letter-spacing:-1px;margin:35px 0 13px}.mode-card p{font-size:13px;line-height:1.8;opacity:.7;margin:0;max-width:240px}.mode-card .arrow{position:absolute;right:27px;top:26px;font-size:21px}.small-modes{display:flex;justify-content:center;gap:32px;padding:28px 0;font-size:12px}.small-modes button{border:0;background:none;text-decoration:underline;text-underline-offset:5px}.collection-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:30px;padding-top:80px;padding-bottom:80px}.collection-section .text{padding-left:30px}.collection-section .text p{max-width:310px;line-height:1.8;color:var(--muted);font-size:14px}.collection-visual{height:390px;position:relative;background:radial-gradient(ellipse,#d6d9c466,transparent 70%)}.collection-visual .stage{top:-15px;left:50%;transform:translateX(-50%) scale(.84)}.collection-visual .stage-controls{display:none}.traditions{display:grid;grid-template-columns:1fr 1fr;gap:64px}.tradition{padding:36px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:20px}.tradition h3{font-family:Georgia,serif;font-size:34px;font-weight:400;margin:8px 0 16px}.tradition p{font-size:14px;line-height:1.8;color:var(--muted);max-width:300px}.tile-triplet{display:flex;align-items:center;gap:5px;transform:rotate(-8deg)}.mini-tile{width:44px;height:60px;background:#faf7e9;border:1px solid #d1c7a8;border-bottom:5px solid #477055;border-radius:5px;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:Georgia,serif;font-size:25px;color:#365d47;box-shadow:0 6px 10px #283b2610}.mini-tile b{font-size:11px;color:#9d4136}.closing{background:#e9e8dc;text-align:center;padding:84px 24px}.closing h2{font-family:Georgia,serif;font-size:58px;font-weight:400;letter-spacing:-2px;margin:0 0 26px}.closing .primary{margin:auto}.footer{padding:32px 6%;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);gap:25px}.footer a{text-decoration:underline;text-underline-offset:3px}.segmented{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:30px;background:#edece1}.segmented button{border:0;background:none;border-radius:24px;padding:12px 23px;min-height:44px;font-size:13px;white-space:nowrap}.segmented button.active{background:#fcfaf5;box-shadow:0 1px 4px #24362c12}.config{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:start}.config-panel{border:1px solid var(--line);border-radius:16px;padding:30px;background:#faf8f1}.config-panel h2{font-family:Georgia,serif;font-weight:400;font-size:28px;margin:0 0 12px}.config-panel p{font-size:13px;line-height:1.8;color:var(--muted)}.setup-fields{display:grid;gap:24px;margin:26px 0}.choices{display:flex;gap:12px;flex-wrap:wrap}.choice{padding:14px 18px;min-height:44px;background:#faf8f1;border:1px solid var(--line);border-radius:9px;font-size:13px}.choice.active{background:#e4e9dc;border-color:#527055}.choice span{display:block;color:var(--muted);font-size:11px;margin-top:5px}.fine{font-size:12px;line-height:1.8;color:var(--muted)}.notice{background:#e9ecdf;border-radius:9px;padding:14px 18px;font-size:12px;line-height:1.8;color:#4d604d;margin:20px 0}.rule-points{padding:0;list-style:none;display:grid;gap:17px;margin:27px 0}.rule-points li{font-size:13px;line-height:1.7;display:flex;gap:13px}.rule-points li:before{content:'✓';color:#6a7958}.text-button{border:0;background:none;padding:12px 0;min-height:44px;font-size:13px;text-decoration:underline;text-underline-offset:5px}.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.catalog-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#f9f7f0}.catalog-image{height:265px;position:relative;overflow:hidden;cursor:pointer;background:radial-gradient(ellipse,#dfe1ce80,transparent)}.catalog-image .stage{top:-75px;transform:translateX(-50%) scale(.52)}.catalog-image .stage-controls{display:none}.catalog-info{padding:24px;border-top:1px solid var(--line)}.catalog-info h3{font:27px Georgia,serif;margin:9px 0}.catalog-info p{font-size:12px;line-height:1.8;color:var(--muted);min-height:42px}.catalog-info .primary{width:100%;justify-content:space-between;margin-top:18px}.badge{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#697663}.avatar-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:25px}.avatar-option{width:76px;height:76px;border:1px solid var(--line);border-radius:50%;font-size:32px;background:#eae9da}.avatar-option.active{border:2px solid #294e3d;box-shadow:0 0 0 4px #294e3d15}.lobby-list{border-top:1px solid var(--line);margin-top:28px}.lobby-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:20px;align-items:center;padding:25px 12px;border-bottom:1px solid var(--line);font-size:13px}.lobby-row h3{font-size:15px;margin:0 0 6px;font-weight:550}.lobby-row p{margin:0;font-size:12px;color:var(--muted)}.room-code{font-size:40px;letter-spacing:7px;font-weight:500;margin:20px 0}.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0}.seat-card{border:1px solid var(--line);border-radius:12px;padding:25px 15px;text-align:center;background:#faf8f1}.seat-card .portrait{width:55px;height:55px;display:grid;place-items:center;border-radius:50%;background:#e5e5d6;font-size:26px;margin:0 auto 14px}.seat-card h3{font-size:13px}.seat-card p{font-size:11px;color:var(--muted)}.empty-state{text-align:center;padding:60px 20px;border:1px dashed #294e3d40;border-radius:14px;margin-top:30px}.empty-state h2{font:30px Georgia,serif}.ranked-card{max-width:620px;margin:15px auto 0;text-align:center;border:1px solid var(--line);padding:50px;border-radius:18px;background:#faf8f1}.rank-mark{font:65px Georgia,serif;margin:12px 0 22px;color:#7b8061}.ranked-card .primary{margin:24px auto 10px}.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.learn-grid article{padding:32px;border:1px solid var(--line);border-radius:12px;background:#faf8f1}.learn-grid h2{font:30px Georgia,serif}.learn-grid h3{font-size:14px;margin-top:25px}.learn-grid p,.learn-grid li{font-size:13px;line-height:1.9;color:var(--muted)}.learn-grid ul{padding-left:20px}.game-shell{max-width:1500px;margin:auto;padding:20px 4% 35px}.game-topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px;margin-bottom:6px}.game-topbar .tools{display:flex;gap:10px}.icon-button{border:1px solid var(--line);border-radius:30px;background:#faf8f1;padding:10px 16px;font-size:12px}.game-board{position:relative;height:500px;border-radius:20px;background:radial-gradient(ellipse at 50% 50%,#d8dbc760,transparent 68%)}.game-board .stage{top:27px;transform:translateX(-50%) scale(1.06)}.game-board .stage-controls{display:none}.game-board .island{animation:none;transform:rotateX(51deg) rotateZ(-16deg)}.player-badge{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:9px 16px 9px 9px;border:1px solid var(--line);border-radius:40px;background:#faf8f1e8;min-width:135px}.player-badge .portrait{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e4e6d7;font-size:23px}.player-badge strong{font-size:12px;display:block;font-weight:550}.player-badge small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.player-badge.active{border-color:#74845d;box-shadow:0 0 0 4px #697c4920}.player-badge.done{background:#e4ead9}.player-badge.far{left:50%;top:3px;transform:translateX(-50%)}.player-badge.left{left:5%;top:220px;transform:none;width:auto;height:auto}.player-badge.right{right:5%;left:auto;top:220px;transform:none;width:auto;height:auto}.table-center-info{position:absolute;top:76px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#737d66}.hand-panel{position:relative;margin:-8px auto 0;max-width:1040px;padding:22px 24px;background:#fcfaf5;border:1px solid var(--line);border-radius:16px;box-shadow:0 9px 35px #26332207;z-index:3}.hand-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px;font-size:12px}.hand-heading strong{font-weight:550}.hand-heading span{color:var(--muted)}.hand{display:flex;justify-content:center;gap:5px;min-height:80px;align-items:center}.hand-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:72px;border:1px solid #ccc7af;border-bottom:5px solid #4b7154;background:linear-gradient(120deg,#fffef6,#efe9d7);border-radius:6px;font-family:Georgia,serif;font-size:25px;color:#a23d32;box-shadow:0 3px 5px #00000008;padding:0;transition:transform 140ms var(--ease)}.hand-tile[data-suit='1']{color:#344e70;font-size:17px}.hand-tile[data-suit='2']{color:#35704e}.hand-tile[data-kind='32']{color:#35704e}.hand-tile b{font-size:11px;line-height:1.3}.hand-tile small{font-family:system-ui;font-size:8px;color:#838574;position:absolute;top:4px;left:5px}.hand-tile.selected{transform:translateY(-9px);outline:2px solid #466142;outline-offset:2px}.hand-tile.drawn{margin-left:10px}.hand-tile:disabled{opacity:.5}.keyboard .hand-tile{transition:none}.game-actions{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:22px;min-height:47px}.game-actions p{font-size:12px;color:var(--muted);max-width:460px;line-height:1.7;margin:0}.game-actions .buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.claim-choice{border:1px solid #748264;border-radius:24px;background:#e9eddf;padding:13px 19px;font-size:12px}.game-bottom{max-width:1040px;margin:18px auto;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}.game-bottom details{max-width:600px}.game-bottom summary{cursor:pointer}.game-bottom ol{line-height:1.9;padding-left:20px}.missing-select{display:flex;justify-content:center;gap:12px;padding:12px}.missing-select button{padding:20px 32px;border:1px solid var(--line);border-radius:10px;background:#f3f2e7;font-size:13px}.missing-select b{display:block;font:30px Georgia,serif;margin-bottom:10px}.result-banner{padding:24px 28px;background:#e7ebdc;border-radius:14px;margin:15px auto 0;max-width:1040px}.result-banner h2{font:32px Georgia,serif;margin:0 0 12px}.result-row{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:13px 0;font-size:13px}.result-row small{display:block;font-size:11px;color:var(--muted);margin-top:6px}.result-banner .buttons{display:flex;gap:18px;margin-top:20px}.finished-note{text-align:center;padding:20px;font:25px Georgia,serif}.screen-reader-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.status-strip{background:#e5e9db;padding:12px 18px;border-radius:9px;font-size:12px;line-height:1.7;margin:12px 0}.dev-note{margin-top:32px;border-top:1px solid var(--line);padding-top:18px;font-size:12px;line-height:1.8;color:var(--muted)}dialog{width:min(500px,calc(100vw - 32px));border:1px solid #d4d6c7;border-radius:18px;padding:36px;background:#faf8f1;color:var(--ink);box-shadow:0 24px 100px #17241930}dialog::backdrop{background:#14231a66;backdrop-filter:blur(5px)}dialog h2{font:34px Georgia,serif;letter-spacing:-1px;margin:0 25px 16px 0}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}dialog .close{position:absolute;right:18px;top:16px;background:none;border:0;font-size:23px}dialog .field{margin:22px 0}dialog .primary{margin-top:22px}dialog .form-error{color:#a23b32;font-size:12px;min-height:18px}.modal-actions{display:flex;gap:20px;align-items:center;margin-top:20px}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:14px 23px;border-radius:30px;background:#203b2c;color:#fff;font-size:12px;z-index:20;box-shadow:0 6px 20px #0002;transition:transform 180ms var(--ease),opacity 180ms var(--ease);max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.showroom{height:310px;position:relative;overflow:hidden}.showroom .stage{top:-30px;transform:translateX(-50%) scale(.7)}.showroom .stage-controls{display:none}
@media(hover:hover) and (pointer:fine){.mode-card:hover{transform:translateY(-4px)}.hand-tile:not(:disabled):not(.selected):hover{transform:translateY(-4px)}.primary:hover{background:#3c604b}.nav-links a:hover,.text-button:hover{opacity:.7}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.island{animation:none!important}}body.paused .island{animation-play-state:paused}body.keyboard button{transition:none}
@media(max-width:1100px){.game-board .stage{transform:translateX(-50%) scale(.92)}.player-badge.left{left:0}.player-badge.right{right:0}.collection-section .text{padding-left:0}.catalog-image .stage{transform:translateX(-50%) scale(.44)}.hero .side-note{left:5%;width:140px}.hero .edition{right:5%}.nav-links{gap:18px}.hand-tile{width:43px;height:67px}.collection-visual .stage{transform:translateX(-50%) scale(.67)}}
@media(max-width:760px){.nav{height:76px}.nav-links>a:not(.nav-join){display:none}.nav-links{gap:12px}.brand small{font-size:7px}.hero{min-height:710px}.copy{padding-top:38px}h1{font-size:62px;letter-spacing:-3px}.description{font-size:13px;max-width:310px}.hero .stage{top:350px;transform:translateX(-50%) scale(.65);height:370px}.hero .side-note{top:645px;left:6%;width:170px}.hero .side-note p,.hero .note-line{display:none}.hero .edition{top:642px;font-size:8px}.hero .edition b{font-size:10px}.bottom-strip{align-items:flex-start;gap:25px;font-size:10px}.bottom-strip .modes{gap:14px;flex-wrap:wrap;justify-content:flex-end}.section{padding:60px 6%}.section h2{font-size:42px}.section-header{display:block}.section-header p{max-width:100%}.play-grid{grid-template-columns:1fr}.mode-card{min-height:190px}.small-modes{gap:20px;flex-wrap:wrap}.collection-section{display:flex;flex-direction:column}.collection-visual{width:100%;height:300px;order:2}.collection-visual .stage{transform:translateX(-50%) scale(.6);top:-45px}.traditions{grid-template-columns:1fr;gap:15px}.closing h2{font-size:42px}.footer{align-items:flex-start;flex-direction:column;line-height:1.8}.page{padding-top:40px}.page h1{font-size:47px}.page-heading{display:block}.page-heading>.primary,.page-heading>.segmented{margin-top:22px}.config{grid-template-columns:1fr;gap:25px}.catalog{grid-template-columns:1fr}.catalog-image{height:250px}.catalog-image .stage{transform:translateX(-50%) scale(.54);top:-80px}.learn-grid{grid-template-columns:1fr}.seats{grid-template-columns:1fr 1fr}.lobby-row{grid-template-columns:1.5fr 1fr auto;gap:10px}.lobby-row .occupancy{display:none}.ranked-card{padding:30px 20px}.game-shell{padding:14px 3%}.game-topbar{align-items:flex-start}.game-topbar .tools{gap:4px}.icon-button{padding:9px 10px;font-size:10px}.game-board{height:380px;overflow:hidden}.game-board .stage{top:-20px;transform:translateX(-50%) scale(.68)}.player-badge{min-width:100px;padding:6px 9px 6px 6px;gap:7px}.player-badge .portrait{width:28px;height:28px;font-size:18px}.player-badge.left,.player-badge.right{top:220px}.player-badge strong{font-size:10px}.player-badge small{font-size:9px}.hand-panel{padding:18px 10px;overflow:hidden}.hand{gap:3px;flex-wrap:wrap}.hand-tile{width:35px;height:56px;font-size:22px}.hand-tile.drawn{margin-left:2px}.hand-heading{font-size:10px}.game-actions{flex-direction:column;align-items:stretch}.game-actions .buttons{justify-content:flex-end}.game-bottom{font-size:10px}.missing-select{gap:6px}.missing-select button{padding:16px}.result-banner{padding:20px}.segmented button{padding:10px 14px;min-height:44px}}
.suit-art{width:90%;height:90%;display:block;flex-shrink:1}.tile.upright .front .suit-art{width:90%;height:94%}.game-site .nav{height:68px}.game-board{height:clamp(310px,calc(100vh - 350px),500px)}.table-center-info{top:auto;bottom:9px}.player-badge.left,.player-badge.right{top:48%}.game-board .stage{top:0;transform:translateX(-50%) scale(.92)}
@media(min-width:761px) and (max-height:800px){.game-board .stage{top:-57px;transform:translateX(-50%) scale(.78)}.game-board{height:310px}.game-shell{padding-top:14px}.hand-panel{padding:16px 24px}.hand-heading{margin-bottom:14px}.game-actions{margin-top:13px}.game-topbar{margin-bottom:0}.player-badge.far{top:-4px}.player-badge.left,.player-badge.right{top:44%}}
@media(max-width:760px){.game-board .stage{top:-48px;transform:translateX(-50%) scale(.62)}.game-board{height:320px}}
/* Real 3D product scenes. CSS geometry remains only as a compatibility fallback. */
.stage.webgl-ready{perspective:none}.table-webgl{position:absolute;inset:0;width:100%;height:100%;display:block}.webgl-ready>.island,.webgl-ready>.halo,.webgl-ready>.shadow{display:none}.webgl-ready>.stage-controls{z-index:2}.hero>.stage.webgl-ready{width:min(860px,80vw);height:440px;top:375px;transform:translateX(-50%)}.collection-visual .stage.webgl-ready{width:100%;height:100%;top:0;transform:translateX(-50%)}.catalog-image .stage.webgl-ready{width:100%;height:100%;top:0;transform:translateX(-50%)}.showroom .stage.webgl-ready{width:100%;height:100%;top:0;transform:translateX(-50%)}.game-board .stage.webgl-ready{width:min(840px,80vw);height:100%;top:0;transform:translateX(-50%)}.hero .stage.webgl-ready .stage-controls{bottom:1px}.game-board .player-badge{z-index:2}.game-board .table-center-info{z-index:1}.hero{min-height:835px}
@media(max-width:760px){.hero>.stage.webgl-ready{width:100vw;height:335px;top:357px;transform:translateX(-50%)}.hero{min-height:740px}.game-board .stage.webgl-ready{width:100%;height:100%;top:0}.hero .side-note,.hero .edition{top:700px}}
.tile-artwork{height:92%;width:92%;object-fit:contain;display:block;pointer-events:none}.hand-tile .tile-artwork{height:86%;width:92%}.tile.upright .front .tile-artwork{height:96%;width:96%}.hero>.stage.webgl-ready{top:330px;height:480px}.hero{min-height:820px}
@media(max-width:760px){.hero>.stage.webgl-ready{top:330px;height:360px}.hero{min-height:740px}}

:root{--accent:#294e3d}
@media(min-width:761px){.hero .side-note{left:5%;width:125px;top:590px}}

/* Readable public information and exact claim previews. */
.table-readouts{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px;flex-wrap:wrap}
.discard-readout{display:flex;align-items:center;gap:13px;min-height:62px}.discard-readout>span{display:grid;gap:5px}.discard-caption{font-size:9px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted)}.discard-readout strong{font-size:14px;font-weight:550}.discard-source{font-size:11px;color:var(--muted)}.discard-readout.empty{font-size:12px;color:var(--muted)}
.preview-tile{width:34px;height:47px;display:inline-flex;flex:none;padding:2px;background:linear-gradient(120deg,#fffef6,#efe9d7);border:1px solid #d0cab6;border-bottom:3px solid #527157;border-radius:5px;box-shadow:0 2px 3px #203b2c0c}.preview-tile .tile-artwork{width:100%;height:100%;object-fit:contain}.discard-readout>.preview-tile{width:43px;height:59px}.preview-tile.from-discard{outline:2px solid #a58948;outline-offset:2px;transform:translateY(-3px)}
.meld-choice{display:flex;align-items:center;gap:16px;padding:12px 15px;border-radius:12px;text-align:left;background:#f5f4e9}.meld-title{display:grid;gap:5px;font-size:13px;font-weight:600}.meld-title>span{font-size:10px;font-weight:400;color:var(--muted)}.meld-tiles{display:flex;gap:5px}.open-sets{display:flex;gap:18px;flex-wrap:wrap}.open-set{display:grid;gap:7px}.open-set>span:first-child{font-size:10px;color:var(--muted)}.game-actions:has(.meld-choice){align-items:flex-start;flex-direction:column}.game-actions:has(.meld-choice)>.buttons{justify-content:flex-start;gap:12px}@media(hover:hover){.meld-choice:hover{background:#e8edde;border-color:#527055}}.meld-choice:active{transform:scale(.98)}

/* Seat-level play: accessible hit targets follow the actual 3D tiles. */
.game-board{height:clamp(500px,65vh,720px)}.game-board .stage.webgl-ready{width:100%;height:100%;overflow:visible}.table-hit-layer{position:absolute;inset:0;pointer-events:none;z-index:3}.table-tile-target{position:absolute;pointer-events:auto;background:transparent;border:0;border-radius:3px;padding:0;cursor:pointer;touch-action:manipulation}.table-tile-target:disabled{cursor:default}.table-tile-target:not(:disabled):hover{background:#fff9d91a;box-shadow:inset 0 0 0 1px #e4ce83a6}.table-tile-target:focus-visible{outline:2px solid #a58948;outline-offset:3px}.game-shell:has(.webgl-ready) .hand-panel>.hand,.game-shell:has(.webgl-ready) .fallback-discard{display:none}.game-shell:has(.webgl-ready) .hand-panel{padding:16px 22px;margin-top:0;box-shadow:none}.game-shell:has(.webgl-ready) .table-readouts{display:none}.game-shell:has(.webgl-ready) .hand-heading{margin-bottom:8px}.game-shell:has(.webgl-ready) .game-actions{margin-top:6px;min-height:32px}.game-shell:has(.webgl-ready) .game-actions:has(.meld-choice){flex-direction:row;align-items:center}.meld-choice{padding:9px 12px;gap:10px}.meld-choice .preview-tile{width:30px;height:42px}.game-board .player-badge.left,.game-board .player-badge.right{top:42%}.game-board .player-badge.far{top:8px}.game-board .table-center-info{bottom:5px}.game-site .nav{height:70px}.game-site .game-topbar{margin-bottom:0}@media(max-width:760px){.game-board{height:460px}.game-shell:has(.webgl-ready) .game-actions:has(.meld-choice){flex-direction:column;align-items:flex-start}}

.game-shell:has(.webgl-ready) .table-readouts{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:0;border:0}

.seat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.seat-grid .mode-card{min-height:210px}
.seat-grid .mode-card h3{margin-top:0}
.seat-note{margin-top:28px;max-width:46ch}
@media(max-width:760px){.seat-grid{grid-template-columns:1fr}}

/* Form rhythm: labels sit on their fields, and each control gets the same gap. */
.form-stack{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.config-panel.form-stack>h2,.config-panel.form-stack>p,.form-stack>.field,.form-stack>.choices,.form-stack>.buttons,.form-stack>.form-error,.form-stack>.primary,.form-stack>.text-button,.form-stack>div{margin:0}
.form-stack>.primary,.form-stack>.text-button,.form-stack>.secondary{align-self:flex-start}
.form-stack>.field,.form-stack>form,.form-stack>.choices{width:100%}
.form-stack>.buttons{display:flex;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;margin-top:0}
.form-stack .form-error:empty{display:none}
.setup{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.setup .setup-fields{margin:0;width:100%}
.setup .fine{margin:0}
.setup .field>.kicker{margin-bottom:0}
.setup>.primary,.setup>.text-button{align-self:flex-start}
dialog form{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
dialog form .field{margin:0;width:100%}
dialog form .primary{margin-top:0}
dialog form .form-error:empty{display:none}
dialog button:focus-visible{outline:none}
dialog .primary:focus-visible{box-shadow:inset 0 0 0 2px #faf8f1}
dialog .secondary:focus-visible,dialog .close:focus-visible{box-shadow:0 0 0 3px #faf8f1,0 0 0 5px #294e3d}
dialog .modal-actions{align-items:center;gap:18px;margin-top:28px}
dialog .modal-actions .primary{margin-top:0}
dialog .modal-actions .secondary{padding:12px 4px;min-height:44px}
.hero .island{animation:float 9s ease-in-out infinite!important}

/* Homepage product reveal. Native scroll remains in control. */
.site:has(.table-story){overflow:clip}.table-story{height:210vh;position:relative}.table-story .hero{position:sticky;top:0;height:100svh;min-height:780px;overflow:hidden}.table-story .hero>.stage.webgl-ready{top:370px;width:min(1050px,94vw);height:510px}.table-story .copy{position:relative;z-index:3;will-change:transform,opacity}.story-caption{position:absolute;bottom:45px;left:0;right:0;text-align:center;pointer-events:none;opacity:0}.story-caption>span{font-size:10px;letter-spacing:2px;color:var(--muted)}.story-caption h2{font:normal clamp(36px,4vw,58px)/1.05 Georgia,serif;letter-spacing:-2px;margin:15px 0 0}.story-caption em{color:#6d7963}.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:10px;letter-spacing:1.3px;color:var(--muted);display:flex;gap:15px}.table-story .stage-controls{display:none}.hero .island{animation:none!important}
body.paused .table-story{height:auto}body.paused .table-story .hero{position:relative}.table-story:has(.hero:not(:has(.webgl-ready))){height:auto}
@media(prefers-reduced-motion:reduce){.table-story{height:auto}.table-story .hero{position:relative}.scroll-cue,.story-caption{display:none}.table-story .copy{will-change:auto}}
@media(max-width:760px){.table-story{height:auto}.table-story .hero{position:relative;height:780px;min-height:780px}.table-story .hero>.stage.webgl-ready{top:350px;height:355px;width:100vw}.scroll-cue,.story-caption{display:none}}

.table-story{overflow-anchor:none}.table-story .side-note,.table-story .edition{display:none}.table-story .scroll-cue{bottom:auto;top:450px;pointer-events:none}.story-motion{position:absolute;right:5%;bottom:22px;z-index:5;background:#f5f2e9cc;border:1px solid #294e3d26;border-radius:24px;padding:10px 15px;font-size:11px;color:#294e3d}.story-motion:focus-visible{outline:2px solid #294e3d;outline-offset:3px}@media(max-width:760px){.story-motion{bottom:15px}}