:root{--felt-hi: #1d8a52;--felt: #0f6b3c;--felt-lo: #0a4f2c;--felt-edge: #052a17;--print: #f2dc9a;--gold: #e7c35a;--gold-hi: #fbe7a1;--gold-lo: #b48521;--leather: #3a2214;--leather-lo: #1f1209;--panel: rgba(3, 28, 16, .62);--panel-line: rgba(242, 220, 154, .26);--text: #f7f3e6;--muted: #bfd3c4;--accent: var(--gold);--accent-text: #2a1c00;--danger: #ff9e94;--focus: #8fd0ff;--card-bg: #fffdf7;--card-red: #c8102e;--card-black: #16181d;--radius: 14px;--serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;--bw: clamp(20px, calc((100vw - 44px) / 14.6), 50px);--hw: clamp(46px, 14vw, 86px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}html{background:var(--felt-edge)}body{position:relative;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;font-size:16px;line-height:1.45;color:var(--text);background:transparent;-webkit-tap-highlight-color:transparent}body:before{content:"";position:fixed;inset:0;z-index:-2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.42 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse 120% 90% at 50% 38%,var(--felt-hi) 0%,var(--felt) 38%,var(--felt-lo) 72%,var(--felt-edge) 100%);background-size:220px 220px,100% 100%}h1,h2,h3{margin:0 0 .6rem;line-height:1.2;font-family:var(--serif);font-weight:700;letter-spacing:.02em}h2{font-size:1.2rem;color:var(--gold-hi)}h3{font-size:1rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.muted{color:var(--muted)}.center{text-align:center}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.mat{position:fixed;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none;overflow:hidden}.mat__print{width:min(118vw,980px);max-height:92vh;color:var(--print);opacity:.09}.topbar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));background:linear-gradient(180deg,#4a2c1a 0%,var(--leather) 45%,var(--leather-lo) 100%);border-bottom:1px solid rgba(231,195,90,.55);box-shadow:0 4px 14px #00000073}.topbar:after{content:"";position:absolute;left:8px;right:8px;bottom:4px;border-bottom:1px dashed rgba(242,220,154,.35);pointer-events:none}.topbar__title{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 1px 0 rgba(0,0,0,.6)}.topbar__suit{width:1.1em;height:1.1em;color:var(--gold);filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}.topbar .btn{color:var(--gold-hi);border-color:#e7c35a73}.screen{width:100%;max-width:1000px;margin:0 auto;padding:14px 16px;padding-bottom:max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.landing,.lobby{max-width:540px}.panel{position:relative;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);padding:14px;box-shadow:0 10px 24px #00000052,inset 0 1px #ffffff0d;backdrop-filter:blur(2px)}.panel:before{content:"";position:absolute;inset:4px;border:1px solid rgba(242,220,154,.08);border-radius:calc(var(--radius) - 4px);pointer-events:none}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:8px;align-items:flex-end}.hero{display:flex;flex-direction:column;align-items:center;gap:4px;margin:10px 0 2px}.logo-fan{position:relative;width:150px;height:118px}.logo-fan .logo-fan__card{--w: 72px;position:absolute;left:39px;top:6px;transform-origin:50% 120%;box-shadow:0 6px 16px #00000073}.logo-fan .logo-fan__card--l{transform:rotate(-20deg)}.logo-fan .logo-fan__card--r{transform:rotate(18deg)}.logo-fan .logo-fan__card--c{transform:rotate(-1deg) translateY(-4px)}.logo{margin:0;text-align:center;font-size:clamp(2.2rem,10vw,3.2rem);letter-spacing:.04em;color:var(--gold);background:linear-gradient(180deg,var(--gold-hi) 10%,var(--gold) 50%,var(--gold-lo) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.55))}.divider{display:flex;align-items:center;gap:10px;margin:2px 0 0;color:var(--muted);font-size:.88rem}.divider:before,.divider:after{content:"";flex:1;border-top:1px solid var(--panel-line)}.field{display:flex;flex-direction:column;gap:5px;font-size:.88rem;color:var(--muted)}.field--grow{flex:1}.field--check{flex-direction:row;align-items:center;gap:10px;color:var(--text)}.field--check input{width:20px;height:20px;accent-color:var(--gold)}input[type=text],input[type=number],select{font:inherit;font-size:1rem;color:#1a1a1a;background:#fbf7ea;border:2px solid rgba(180,133,33,.35);border-radius:10px;padding:9px 12px;min-height:46px;width:100%;box-shadow:inset 0 2px 4px #0000001f}input::placeholder{color:#8a8578}input:focus-visible,select:focus-visible{border-color:var(--focus);outline-offset:0}.code-input{text-transform:uppercase;letter-spacing:.28em;font-family:ui-monospace,SF Mono,Menlo,monospace}.form-error{margin:0;color:var(--danger);font-weight:600}.config{border:0;padding:0;margin:0;display:grid;gap:12px}.config legend{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--gold-hi);margin-bottom:8px;padding:0}.cfg-value{color:var(--text);font-weight:600}@media (min-width: 560px){.config{grid-template-columns:1fr 1fr}.config legend{grid-column:1 / -1}}.btn{font:inherit;font-weight:650;letter-spacing:.01em;color:var(--text);background:linear-gradient(180deg,#ffffff1a,#ffffff05);border:1px solid rgba(242,220,154,.4);border-radius:999px;padding:10px 18px;min-height:44px;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:background .15s,transform .1s,box-shadow .15s,filter .15s}.btn:hover:not(:disabled){background:linear-gradient(180deg,#ffffff2e,#ffffff0f)}.btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 2px #0000004d}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{color:var(--accent-text);background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-lo) 100%);border:1px solid #8e6512;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:0 3px 10px #0006,inset 0 1px #fff9}.btn--primary:hover:not(:disabled){background:linear-gradient(180deg,#fff1bf,#f0cf6c 45%,#c4952c)}.btn--danger{color:var(--danger);border-color:#ff9e9480}.btn--ghost{background:transparent;box-shadow:none}.btn--on{color:var(--accent-text);background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:#8e6512}.btn--small{padding:6px 12px;min-height:36px;font-size:.85rem}.btn--big{font-size:1.12rem;padding:14px 24px}.btn--block{width:100%}.actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center}.rules summary{cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--gold-hi);min-height:32px}.rules ul{margin:8px 0 0;padding-left:1.2rem}.rules li+li{margin-top:6px}.rules li::marker{color:var(--gold)}.lobby__code{display:flex;flex-direction:column;align-items:center;gap:8px}.room-code{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:clamp(2rem,11vw,3rem);letter-spacing:.2em;padding-left:.2em;color:var(--gold-hi);text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 18px rgba(231,195,90,.35);user-select:all}.room-code--small{font-size:.85rem;letter-spacing:.14em;padding:3px 8px;border:1px solid var(--panel-line);border-radius:999px;background:#00000040;text-shadow:none}.seat-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:5px}.seat-item{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:12px;background:#ffffff0b;border:1px solid transparent;min-height:48px;flex-wrap:wrap}.seat-item--me{background:#e7c35a1a;border-color:#e7c35a4d}.seat-item--free{border:1px dashed rgba(242,220,154,.16);background:transparent;opacity:.75}.seat-item__name{font-weight:650;overflow-wrap:anywhere}.seat-item__remove{margin-left:auto}.dot{width:9px;height:9px;border-radius:50%;background:#ffffff40;flex:none}.dot--on{background:#6ef0a8;box-shadow:0 0 6px #6ef0a8b3}.dot--off{background:#ff8a80}.badge{font-size:.7rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:999px;background:#ffffff24;color:var(--text);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.badge--host{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--accent-text)}.badge--place{background:#6ef0a8;color:#062b17}.badge--warn{background:#ff8a8038;color:#ffd2cd}.chip{--c: #b3261e;position:relative;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--c) 0 54%,transparent 55%),repeating-conic-gradient(var(--c) 0deg 22.5deg,#f7f3e6 22.5deg 45deg);box-shadow:0 2px 4px #0000008c,inset 0 0 0 1.5px #0000004d}.chip:after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed rgba(255,255,255,.55)}.chip__face{position:relative;z-index:1;font-family:var(--serif);font-weight:700;font-size:.82rem;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6)}.chip--0{--c: #b3261e}.chip--1{--c: #1f5fa8}.chip--2{--c: #2b2b30}.chip--3{--c: #6b3fa0}.chip--4{--c: #d07a1f}.chip--5{--c: #0f8a6e}.chip--6{--c: #c03a7a}.chip--7{--c: #7a4b26}.card{--w: var(--hw);position:relative;display:block;width:var(--w);aspect-ratio:5 / 7;flex:none;border-radius:calc(var(--w) * .08);background:linear-gradient(160deg,#ffffff 0%,var(--card-bg) 55%,#f3ecd9 100%);border:1px solid rgba(0,0,0,.28);box-shadow:0 2px 5px #0006,inset 0 0 0 1px #ffffffb3;padding:0;margin:0;overflow:hidden;user-select:none}.card--red{color:var(--card-red)}.card--black{color:var(--card-black)}.card__svg{display:block;width:100%;height:100%}.card--board{--w: var(--bw);border-radius:calc(var(--bw) * .1);box-shadow:0 1px 3px #00000080;animation:card-in .32s cubic-bezier(.2,.9,.3,1.2)}.card--button{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.card--legal{box-shadow:0 0 0 2px var(--gold-hi),0 0 16px 2px #e7c35abf,0 6px 12px #00000073;transform:translateY(-10px)}.card--legal:hover{transform:translateY(-16px)}.card--dim{filter:brightness(.7) saturate(.7);cursor:default}.card--selected{box-shadow:0 0 0 3px var(--focus),0 0 14px #8fd0ff99,0 6px 12px #00000073;transform:translateY(-12px)}.card--button:focus-visible{outline:3px solid var(--focus);outline-offset:2px;z-index:2}.card-back{--w: var(--hw);display:block;flex:none;width:var(--w);aspect-ratio:5 / 7;border-radius:calc(var(--w) * .08);border:calc(var(--w) * .05) solid #fffdf7;background:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,rgba(255,255,255,.13) 0 1px,transparent 1px 7px),radial-gradient(circle at 50% 50%,#c4202f,#8f1220);box-shadow:0 2px 5px #00000073,inset 0 0 0 1.5px #e7c35ad9}.card-back--mini{--w: 17px;border-width:1.5px;margin-left:-10px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 50%,#c4202f,#8f1220);box-shadow:0 1px 2px #00000080,inset 0 0 0 1px #e7c35ab3}.card-back--mini:first-child{margin-left:0}@keyframes card-in{0%{transform:translateY(-14px) scale(1.25) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}.table{gap:12px}.table__top{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;gap:8px}.table__top .muted{font-family:var(--serif);letter-spacing:.06em;text-transform:uppercase;color:var(--print);opacity:.85}.opponents{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}.opp{position:relative;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:7px 9px;display:flex;flex-direction:column;gap:5px;min-width:0;box-shadow:0 6px 14px #00000047;transition:border-color .2s,box-shadow .2s,transform .2s}.opp--turn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px #e7c35a80,0 6px 14px #00000047;transform:translateY(-2px)}.opp--out{opacity:.7}.opp--offline .opp__name{color:var(--muted);font-style:italic}.opp__head{display:flex;gap:7px;align-items:center;min-width:0}.opp__head .chip{width:28px;height:28px}.opp__head .chip:after{inset:6px}.opp__head .chip__face{font-size:.72rem}.opp__name{font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opp__crown{color:var(--gold)}.opp__fan{display:flex;align-items:center;min-height:26px}.opp__count{margin-left:7px;font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--gold-hi)}.opp__meta{display:flex;flex-wrap:wrap;gap:4px;font-size:.76rem;align-items:center;color:var(--muted)}.timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold-hi)}.board{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.1vw,10px);padding:clamp(10px,2.6vw,20px) clamp(4px,1.4vw,16px);border-radius:clamp(18px,4vw,36px);border:2px solid rgba(242,220,154,.38);background:radial-gradient(ellipse at 50% 50%,#ffffff0d,#0000001f);box-shadow:inset 0 0 0 5px #0000,inset 0 0 0 6px #f2dc9a24,inset 0 0 40px #00000040}.board__row{display:grid;grid-template-columns:calc(var(--bw) * .85) repeat(13,var(--bw));gap:clamp(1px,.4vw,4px);align-items:center}.board__suit{width:calc(var(--bw) * .62);height:calc(var(--bw) * .62);justify-self:center;color:var(--print);opacity:.85}.board__row--red .board__suit{color:#ff9a9a}.slot{width:var(--bw);aspect-ratio:5 / 7;border-radius:calc(var(--bw) * .1);border:1px solid rgba(242,220,154,.16);display:grid;place-items:center}.slot--seven{border-color:#f2dc9a61;background:#f2dc9a0a}.slot--open-here{border:1.5px dashed rgba(242,220,154,.6)}.slot__label{font-family:var(--serif);font-size:calc(var(--bw) * .38);color:#f2dc9a6b;font-weight:700}.slot__suit{width:58%;height:58%;color:var(--print);opacity:.3}.board__row--red .slot__suit{color:#ff9a9a}.status{align-self:center;margin:0;padding:6px 16px;text-align:center;font-family:var(--serif);font-weight:700;font-size:1.02rem;min-height:1.4em;border-radius:999px;background:#00000047;border:1px solid rgba(242,220,154,.18)}.status--mine{color:var(--accent-text);background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:#8e6512;box-shadow:0 0 18px #e7c35a73}.status--mine .timer{color:var(--accent-text)}.me{position:relative;background:linear-gradient(180deg,#031c108c,#031c10bf);border:1px solid var(--panel-line);border-radius:18px;padding:10px 10px 12px;box-shadow:0 10px 24px #00000059;transition:border-color .2s,box-shadow .2s}.me--turn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 24px #e7c35a59,0 10px 24px #00000059}.me__info{display:flex;gap:9px;align-items:center;margin-bottom:4px;flex-wrap:wrap}.hand{display:flex;flex-wrap:wrap;justify-content:center;padding:16px 4px 4px;row-gap:10px}.hand .card{animation:deal-in .35s ease-out backwards}.hand .card+.card{margin-left:calc(var(--hw) * -.36)}.hand .card:hover,.hand .card:focus-visible{z-index:1}@media (min-width: 720px){.hand .card+.card{margin-left:calc(var(--hw) * -.22)}}.hand--modal{--hw: clamp(46px, 12vw, 66px);margin-bottom:14px}.hand--modal .card+.card{margin-left:calc(var(--hw) * -.14)}@keyframes deal-in{0%{opacity:0;transform:translateY(18px)}}.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.log summary{cursor:pointer;font-family:var(--serif);font-weight:700;color:var(--gold-hi)}.log__list{list-style:none;margin:6px 0 0;padding:0;max-height:9.5em;overflow-y:auto;font-size:.88rem}.log__list li{padding:3px 0;border-bottom:1px solid rgba(242,220,154,.08);overflow-wrap:anywhere}.log__list li:first-child{color:var(--gold-hi)}.overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,#00000073,#000000bf);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;animation:fade-in .2s ease-out}.modal{position:relative;background:radial-gradient(ellipse at 50% 0%,rgba(29,138,82,.55),transparent 70%),linear-gradient(180deg,#0f4d2d,#08321d);border:1px solid rgba(231,195,90,.6);border-radius:18px;padding:18px;width:100%;max-width:540px;max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:0 20px 60px #0009,inset 0 0 0 5px #0000,inset 0 0 0 6px #f2dc9a1f;animation:pop-in .22s cubic-bezier(.2,.9,.3,1.15)}.modal--wide{max-width:720px}.winner{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--gold-hi);text-shadow:0 0 16px rgba(231,195,90,.5)}.table-scroll{overflow-x:auto;margin-bottom:14px}.scores{border-collapse:collapse;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums}.scores th,.scores td{padding:6px 8px;text-align:right;border-bottom:1px solid rgba(242,220,154,.1);white-space:nowrap}.scores th:first-child{text-align:left}.scores thead th{max-width:7em;overflow:hidden;text-overflow:ellipsis;color:var(--gold-hi);font-family:var(--serif)}.scores tfoot td,.scores tfoot th{border-top:2px solid rgba(231,195,90,.45);font-weight:700}.is-me{color:var(--gold-hi)}.standings{margin:0 0 16px;padding-left:1.5rem}.standings li{padding:4px 0}.standings li::marker{color:var(--gold);font-family:var(--serif);font-weight:700}.standings li span:first-child{font-weight:650;margin-right:8px}.banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;background:linear-gradient(180deg,#9a6a00,#7a5200);color:#fff;font-weight:600;font-size:.9rem;position:sticky;top:0;z-index:40;box-shadow:0 3px 10px #00000059}.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .9s linear infinite}.toasts{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(92vw,420px);display:flex;flex-direction:column;gap:6px;z-index:60;pointer-events:none}.toast{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:linear-gradient(180deg,#23392d,#18291f);border:1px solid var(--panel-line);box-shadow:0 6px 20px #00000073;animation:toast-in .2s ease-out}.toast span{flex:1;overflow-wrap:anywhere}.toast--error{background:linear-gradient(180deg,#6b1f1a,#4f1511);border-color:#a33a33}.toast__close{background:none;border:0;color:inherit;font-size:1.3rem;line-height:1;cursor:pointer;min-width:32px;min-height:32px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.94) translateY(8px)}}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.card--legal,.card--legal:hover,.card--selected{transform:none}}