@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500,20,1;9..144,600,20,1&display=swap');
:root{--ink:#163c38;--green:#173d39;--green-deep:#102f2c;--felt:#276155;--felt-light:#347265;--cream:#f5f1e6;--paper:#fffdf7;--gold:#d4a94f;--coral:#db765e;--line:#d9d4c6;--muted:#697971;--shadow:0 22px 65px rgba(18,47,42,.14)}
*{box-sizing:border-box}html{background:var(--cream)}body{margin:0;color:var(--ink);font-family:"DM Sans",Arial,sans-serif;font-size:15px}button,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:"Fraunces",Georgia,serif}p{line-height:1.6}.shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4.8vw,80px);background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{border:0;background:none;display:flex;align-items:center;gap:12px;color:var(--green);font-size:15px;font-weight:700;letter-spacing:.16em;padding:0}.brand b{font-weight:400}.brand-mark{width:34px;height:38px;display:grid;place-items:center;background:var(--green);color:#f6efdb;border-radius:4px;box-shadow:0 3px 0 #092b27;font-family:Georgia,serif;font-size:24px;letter-spacing:0}.topbar-right{display:flex;align-items:center;gap:25px}.record{font-size:12px;color:var(--muted);letter-spacing:.05em}.text-button,.link-button,.quiet{border:0;background:none;color:var(--green);font-weight:700;padding:9px 0}.text-button:hover,.link-button:hover,.quiet:hover{text-decoration:underline}.link-button{color:#a65b45}.footer{margin-top:auto;padding:22px clamp(20px,4.8vw,80px);display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px;letter-spacing:.04em;border-top:1px solid var(--line);background:var(--paper)}
.primary,.secondary,.win-button{border-radius:4px;min-height:44px;padding:11px 20px;font-weight:700;transition:transform .15s ease,box-shadow .15s ease}.primary{border:1px solid var(--green);background:var(--green);color:white;box-shadow:0 4px 0 var(--green-deep)}.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--green-deep)}.secondary{border:1px solid var(--green);background:transparent;color:var(--green)}.secondary:hover:not(:disabled){background:#e7eee6}.win-button{border:1px solid #b56d28;background:var(--gold);color:#302a19}.small-button{min-height:34px;padding:6px 12px;font-size:12px}
.home{width:min(1300px,100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:640px;padding:42px clamp(20px,4.8vw,80px) 24px;gap:40px}.home-copy{position:relative;z-index:1}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.19em;font-weight:700;color:#9a7750}.home .eyebrow{display:flex;align-items:center;gap:10px}.tiny-tile{width:26px;height:29px;display:grid;place-items:center;background:var(--paper);box-shadow:0 2px 0 #c6c0b2;color:var(--coral);border:1px solid #d7d0c0;border-radius:3px;font-size:18px}.home h1{font-size:clamp(61px,7vw,108px);line-height:.98;letter-spacing:-.055em;margin:26px 0 28px;font-weight:500}.home h1 em{font-weight:500;color:#bb694e}.home-copy>p{font-size:17px;max-width:510px;color:#526a62}.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}.home-actions .primary,.home-actions .secondary{min-width:150px}.home-meta{display:flex;gap:30px;padding-top:29px;border-top:1px solid var(--line);max-width:490px;color:var(--muted);font-size:12px}.home-meta span{display:flex;align-items:baseline;gap:6px}.home-meta strong{font-family:"Fraunces",Georgia,serif;font-size:28px;color:var(--green);font-weight:500}.home-art{height:560px;display:grid;place-items:center}.felt-ring{width:min(500px,100%);aspect-ratio:1;position:relative;background:radial-gradient(circle at 40% 35%,#397a69,var(--green) 70%);border:16px solid #1a4d43;border-radius:50%;box-shadow:0 0 0 7px #c09a5f,0 0 0 13px #e4d1a7,0 35px 75px #16403833,inset 0 0 0 2px #71a08c}.felt-ring:after{content:"";position:absolute;inset:26px;border:1px solid #80ac9655;border-radius:50%;pointer-events:none}.art-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#d7c798;font-family:"Fraunces",Georgia,serif;letter-spacing:.17em;font-size:22px;line-height:1.55;opacity:.85}.art-center b{font-size:12px;font-family:"DM Sans",Arial,sans-serif;font-weight:500;letter-spacing:.38em}.art-tile{position:absolute;filter:drop-shadow(3px 10px 7px #0e302b88)}.art-one{left:19%;top:22%;transform:rotate(-18deg)}.art-two{right:17%;top:25%;transform:rotate(15deg)}.art-three{left:24%;bottom:19%;transform:rotate(12deg)}.art-four{right:20%;bottom:17%;transform:rotate(-11deg)}.art-tile .tile{width:66px;height:82px}.art-tile .tile-face{font-size:38px}.home-note{display:flex;align-items:center;gap:25px;padding:22px clamp(20px,4.8vw,80px);background:#e9e5d7;border-top:1px solid var(--line)}.home-note h2{font-size:19px;margin:0;white-space:nowrap}.home-note p{margin:0;max-width:600px;color:#58675e;font-size:13px}.home-note button{margin-left:auto;white-space:nowrap}
.tile{width:47px;height:61px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#fffef8;color:#19443d;border:1px solid #d5d3c6;border-radius:5px;box-shadow:0 4px 0 #cad2c6,0 5px 5px #112f2827;user-select:none;position:relative;flex:none}.tile:before{content:"";position:absolute;inset:4px;border:1px solid #e5e5da;border-radius:2px}.tile-face{font-family:Georgia,serif;font-weight:700;font-size:29px;line-height:1;position:relative}.tile-label{font-size:6px;font-weight:700;letter-spacing:.13em;margin-top:5px;position:relative}.tile.crak,.tile.red{color:#b64941}.tile.dot,.tile.white{color:#315d90}.tile.flower{color:#d37b59}.tile.joker{color:#a4762c;background:#fff9db}.tile.small{width:31px;height:42px;box-shadow:0 2px 0 #cad2c6}.tile.small .tile-face{font-size:19px}.tile.small .tile-label{font-size:4px;margin-top:3px}
.game{width:min(1500px,100%);margin:0 auto;padding:30px clamp(14px,3.5vw,55px) 56px}.game-top{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:24px}.game-top h1{font-size:45px;line-height:1;margin:9px 0 0;font-weight:500}.game-top-actions{display:flex;align-items:center;gap:18px}.wall-count{font-size:12px;color:var(--muted)}.table{height:420px;border:15px solid #855b3a;border-radius:115px;background:radial-gradient(circle at 50% 45%,var(--felt-light),var(--felt) 55%,#225348);box-shadow:inset 0 0 0 3px #a7bf8a,0 25px 36px #133c362b,0 2px 0 4px #c08a5b;position:relative;overflow:hidden}.table-pattern{position:absolute;inset:24px;border:1px solid #9dbb9566;border-radius:86px;pointer-events:none}.table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-47%);display:flex;flex-direction:column;align-items:center;color:#f3edd9;min-width:170px}.table-center small{font-size:9px;letter-spacing:.2em;margin-bottom:8px;opacity:.78}.table-monogram{font-family:Georgia,serif;color:#d7bd76;font-size:32px;margin-bottom:3px}.table-center strong{font-size:11px;margin-top:8px;font-weight:600}.turn-label{font-size:11px;margin-top:12px;padding:6px 11px;border-radius:30px;background:#e9e1c3;color:var(--green);font-weight:700}.empty-tile{width:47px;height:61px;display:grid;place-items:center;border:1px dashed #e4e2c885;border-radius:5px}.opponent{position:absolute;color:white;display:flex;flex-direction:column;gap:8px}.seat-1{left:28px;top:50%;transform:translateY(-50%);max-width:180px}.seat-2{left:50%;top:15px;transform:translateX(-50%);align-items:center;max-width:370px}.seat-3{right:28px;top:50%;transform:translateY(-50%);align-items:flex-end;max-width:180px}.opponent-header{display:flex;align-items:center;gap:8px;background:#113d36b8;border:1px solid #ffffff34;border-radius:30px;padding:5px 10px 5px 5px;white-space:nowrap}.opponent-header strong,.opponent-header small{display:block}.opponent-header strong{font-size:11px}.opponent-header small{font-size:9px;color:#d4e2d5}.avatar{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#e7d6a3;color:var(--green);font-family:"Fraunces",Georgia,serif;font-weight:700}.turn-dot{color:#f0bb5c;font-size:10px}.opponent-rack{display:flex;justify-content:center;max-width:285px;overflow:hidden;padding:0 3px 4px}.tile-back{width:16px;height:25px;flex:none;background:linear-gradient(135deg,#f2e8c4,#d9c58d);border:1px solid #f7ecc8;border-radius:3px;box-shadow:0 2px 0 #88764e;margin-right:-1px}.seat-1 .opponent-rack,.seat-3 .opponent-rack{max-width:165px}.exposures{display:flex;flex-wrap:wrap;gap:5px}.opponent .exposures{max-height:92px;overflow:auto}.exposure{display:flex;align-items:center;gap:1px;background:#1d493f91;padding:4px;border-radius:5px;position:relative}.swap-button{background:#f5e3a9;color:var(--green);border:0;border-radius:3px;font-size:8px;font-weight:700;margin-left:4px;padding:6px}.seat-1 .exposure,.seat-3 .exposure{max-width:165px;flex-wrap:wrap}
.under-table{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;margin-top:28px}.play-panel,.side-panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.rack-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}.rack-heading h2{font-size:27px;font-weight:500;margin:5px 0 0}.rack-count{font-size:11px;color:var(--muted)}.your-rack{padding:26px 27px 18px}.hand{display:flex;flex-wrap:wrap;gap:7px;min-height:74px}.hand-tile{padding:0;border:0;background:transparent;border-radius:5px;transition:transform .15s ease}.hand-tile:hover{transform:translateY(-5px)}.hand-tile.selected{transform:translateY(-11px)}.hand-tile.selected .tile{border-color:#b77e3f;box-shadow:0 4px 0 #b77e3f,0 0 0 3px #e8c26f}.player-exposures{margin-top:16px}.player-exposures:empty{display:none}.player-exposures .exposure{background:#e6ede8}.action-panel{border-top:1px solid var(--line);padding:22px 27px 26px;min-height:154px}.action-panel h3{font-size:22px;font-weight:500;margin:0 0 5px}.action-panel p{font-size:13px;color:#5f7268;margin-bottom:14px}.control-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.side-panel{box-shadow:none}.side-block{padding:24px;border-bottom:1px solid var(--line)}.side-block:last-child{border-bottom:0}.side-block h3{font-size:22px;font-weight:500;margin:10px 0 5px}.side-block p{font-size:12px;color:var(--muted);margin-bottom:8px}.log{padding-left:17px;margin:12px 0 0;color:#66776d;font-size:11px;line-height:1.7}.log li+li{margin-top:7px}.log li:first-child{color:var(--green);font-weight:700}
#overlay[hidden]{display:none}#overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px}.overlay-shade{position:absolute;inset:0;background:#102f2cd9;backdrop-filter:blur(4px)}.dialog{position:relative;width:min(720px,100%);max-height:min(90vh,850px);overflow:auto;padding:32px;background:var(--paper);border:1px solid #f8edd4;border-radius:9px;box-shadow:0 30px 90px #061b19a8}.dialog-header{display:flex;align-items:start;justify-content:space-between;gap:15px}.dialog h2{font-size:38px;font-weight:500;margin:6px 0 10px}.dialog-intro{color:#5b6d64;font-size:14px}.icon-button{border:1px solid var(--line);background:transparent;padding:7px 11px;border-radius:4px;color:var(--green);font-weight:700}.card-list{border-top:1px solid var(--line);margin-top:18px}.card-line{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.card-line h3{font-size:18px;margin:0 0 2px;font-weight:500}.card-line p{font-size:11px;margin:0 0 4px;color:var(--muted)}.card-line code{font-family:"DM Sans",Arial,sans-serif;font-size:11px;color:#a65b45}.card-line>strong{font-family:"Fraunces",Georgia,serif;font-size:21px;color:#b47736;font-weight:500}.concealed{font-family:"DM Sans",Arial,sans-serif;font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:#e1e9e0;padding:3px 5px;border-radius:2px;vertical-align:middle}.card-foot{font-size:11px;color:var(--muted);margin:18px 0 0}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}.guide-grid section{border-top:1px solid var(--line);padding-top:14px}.guide-grid b{font-size:10px;color:#b47736;letter-spacing:.14em}.guide-grid h3{font-size:20px;margin:5px 0}.guide-grid p{font-size:12px;color:#5f7268}.tour-head{display:flex;align-items:center;justify-content:space-between}.tour-symbol{font-size:56px;color:var(--coral);margin-top:35px}.tour-dots{display:flex;gap:6px;margin:25px 0}.tour-dots span{height:5px;width:28px;border-radius:6px;background:#d9d4c6}.tour-dots .active{background:var(--coral)}#toast{position:fixed;z-index:20;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1a3d38;color:white;border:1px solid #7da497;border-radius:6px;box-shadow:var(--shadow);padding:12px 18px;font-size:13px;max-width:min(90vw,560px);transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1000px){.home{grid-template-columns:1fr 0.8fr}.home-art{height:420px}.under-table{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr 1fr}.side-block{border-bottom:0}.side-block:first-child{border-right:1px solid var(--line)}}
@media(max-width:700px){.topbar{height:62px;padding:0 16px}.brand{font-size:11px;letter-spacing:.1em}.brand-mark{width:28px;height:32px;font-size:19px}.topbar-right{gap:10px}.record{display:none}.footer{padding:16px;flex-wrap:wrap}.home{display:block;min-height:0;padding:55px 22px 42px}.home h1{font-size:64px}.home-art{height:340px;margin-top:44px}.felt-ring{width:310px;border-width:11px}.art-tile .tile{width:45px;height:58px}.art-tile .tile-face{font-size:27px}.home-note{display:block;padding:22px}.home-note p{margin:8px 0}.game{padding:20px 10px 40px}.game-top{align-items:start}.game-top h1{font-size:33px}.game-top-actions{gap:7px;flex-wrap:wrap;justify-content:flex-end}.game-top-actions .wall-count{width:100%;text-align:right}.game-top-actions .text-button{display:none}.table{height:355px;border-width:10px;border-radius:55px}.table-pattern{inset:13px;border-radius:44px}.seat-1{left:9px;max-width:105px}.seat-3{right:9px;max-width:105px}.seat-2{top:8px}.opponent-header{padding:3px 6px 3px 3px;gap:4px}.avatar{width:20px;height:20px;font-size:10px}.opponent-header strong{font-size:9px}.opponent-header small{font-size:7px}.seat-1 .opponent-rack,.seat-3 .opponent-rack{max-width:90px}.seat-1 .exposure,.seat-3 .exposure{max-width:95px}.opponent .tile.small{width:23px;height:31px}.opponent .tile.small .tile-face{font-size:14px}.opponent .tile.small .tile-label{font-size:3px}.opponent .exposures{max-height:86px}.tile-back{width:10px;height:18px}.table-center{transform:translate(-50%,-38%)}.table-monogram{font-size:25px}.under-table{margin-top:20px;gap:14px}.your-rack{padding:18px 13px}.rack-heading h2{font-size:23px}.rack-count{font-size:9px}.hand{gap:5px}.hand .tile{width:38px;height:52px}.hand .tile-face{font-size:25px}.hand .tile-label{font-size:5px}.action-panel{padding:17px 13px 20px}.side-panel{display:block}.side-block{padding:18px}.side-block:first-child{border-right:0;border-bottom:1px solid var(--line)}.dialog{padding:22px}.dialog h2{font-size:31px}.guide-grid{grid-template-columns:1fr;gap:10px}}
@media(max-width:390px){.hand{gap:3px}.hand .tile{width:34px;height:47px}.hand .tile-face{font-size:23px}.hand .tile-label{font-size:4px}.home h1{font-size:56px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.difficulty-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--green);margin:22px 0 8px}#difficulty{width:100%;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--green);padding:12px;min-height:44px}.setup-actions{margin-top:24px}
.seat-1{left:auto;right:28px;align-items:flex-end}.seat-3{right:auto;left:28px;align-items:flex-start}
@media(max-width:700px){.seat-1{left:auto;right:9px}.seat-3{right:auto;left:9px}}