.table-v2{height:100dvh;min-height:600px;max-width:1180px;margin:auto;display:flex;flex-direction:column;gap:12px;padding:0 28px max(20px,env(safe-area-inset-bottom));color:#fff6e8}
.table-header{height:62px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #efd9b230}.table-header h1{font-size:19px;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-header>button,.table-header .menu-anchor>button{border:0;background:transparent;color:inherit;min-height:44px;min-width:44px;font-size:16px}.table-header>button{text-align:left}.table-header .menu-anchor>button{font-size:19px;letter-spacing:2px}.menu-anchor{position:relative}.table-menu{position:absolute;z-index:51;top:100%;right:0;min-width:215px;background:var(--surface);color:#29251e;border:1px solid var(--rule);border-radius:9px;box-shadow:0 8px 30px #1d170c60;padding:7px;display:flex;flex-direction:column}.table-menu button{border:0;background:none;color:inherit;min-height:44px;text-align:left;padding:10px 13px;font-size:15px;white-space:nowrap}.table-menu button:hover{background:#e9e4d6;border-radius:5px}.menu-dismiss{position:fixed;z-index:50;inset:0;background:transparent!important;border:0;cursor:default}.unread-dot{display:block;width:6px;height:6px;position:absolute;top:8px;right:6px;border-radius:50%;background:#f6d786}
.opponents{display:flex;justify-content:center;gap:clamp(20px,7vw,100px);flex-shrink:0;padding-top:5px}.opponent{display:flex;align-items:center;flex-direction:column;gap:4px;min-width:0;max-width:130px;text-align:center}.opponent strong{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opponent small{font-size:12px;color:#eedfcd;white-space:nowrap}.opponent-current .lake-avatar{outline:3px solid #a6ce95;outline-offset:3px}.opponent-current strong:after{content:' · Turn';font-size:11px;font-weight:400}.contract-line{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-shrink:0;font-size:14px;line-height:1.3}.contract-line span{color:#e1c8ab}.contract-line strong{font-size:17px;font-weight:600}
.felt-table{flex:1;min-height:180px;overflow-y:auto;overscroll-behavior:contain;background:#1b503c;border:1px solid #0a3b2a;border-radius:11px;box-shadow:0 2px 3px #21130d35;padding:22px 16px;scrollbar-color:#729176 transparent}.draw-piles{display:flex;align-items:start;justify-content:center;gap:36px}.draw-piles>div{display:flex;flex-direction:column;align-items:center;gap:9px}.draw-piles>div>span{font-size:13px;color:#f4ecd9}.draw-piles .playing-card.big,.draw-piles .card-back.big{--cw:5.6rem;--ch:7.95rem}.pile-stack:disabled{opacity:1}.empty-discard{width:5.6rem;height:7.95rem;border:1px dashed #89a991;border-radius:6px}.table-melds{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding-top:24px}.table-melds:empty{display:none}.table-melds>div{max-width:100%;overflow-x:auto}.table-melds .playing-card.small{--cw:3.1rem;--ch:4.4rem}.table-melds [class*='text-emerald-']{color:#d0e4d7}.table-melds [class*='bg-emerald-950']{background:#102f2359}.table-melds [class*='text-amber-']{color:#ecdaa4}
.decision-dock{flex-shrink:0;background:var(--paper);color:#29251e;border:1px solid #efe1c8;border-radius:9px;padding:15px 22px;box-shadow:0 2px 5px #231b1640}.decision-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.decision-heading h2{font-size:21px;line-height:1.22;letter-spacing:-.4px}.decision-dock p{font-size:14px;line-height:1.45;margin-top:5px;color:#625745}.decision-actions{display:flex;gap:10px;margin-top:12px}.decision-actions button{flex:1;min-height:48px;font-size:17px}.decision-dock>small{display:block;margin-top:8px;text-align:center;color:var(--muted);font-size:12px}.decision-dock>.outline-button{margin-top:10px;min-height:44px}.decision-timer{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:12px}.decision-timer button{border:0;border-left:1px solid #c8bca5;background:none;color:var(--pine);font-weight:600;min-height:44px;padding:8px}.decision-locked{background:#eadfc6}.decision-dock small .text-button{font-size:12px;min-height:32px}.hand-v2{flex-shrink:0;background:var(--paper);border:1px solid #eee0c6;border-radius:9px;color:#29251e;box-shadow:0 2px 5px #231b1640;min-width:0;padding:4px 20px 10px}.hand-v2 header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}.hand-v2 header>span{min-width:0}.hand-v2 .sort-menu{top:auto;bottom:100%}.hand-scroll{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:14px 3px 9px;gap:0;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#baa98d transparent;min-height:100px}.hand-slot{flex-shrink:0;margin-left:-28px}.hand-slot:first-child{margin-left:0}.hand-slot:focus-within,.hand-slot:hover{z-index:6}.hand-v2 .playing-card{--cw:6rem;--ch:8.5rem}.hand-scroll .playing-card.selected{transform:translateY(-9px);box-shadow:0 0 0 3px #46775b,0 5px 9px #182c2440}.staging-panel{flex-shrink:0;border-radius:9px;padding:14px;max-height:28dvh;overflow-y:auto}.staging-panel .flex.flex-wrap.gap-3{flex-wrap:nowrap;overflow-x:auto}.staging-panel button{white-space:nowrap}.staging-panel [class*='min-w-']{min-width:190px}.staging-panel>div:last-child{position:sticky;bottom:0}.table-v2:has(.staging-panel) .felt-table{min-height:115px}.table-v2:has(.staging-panel) .decision-action{display:none}
.waiting-v2{max-width:780px;margin:40px auto;padding:20px 44px 32px;background:var(--surface);border-radius:12px;box-shadow:0 8px 32px #21160d50}.waiting-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:14px}.waiting-header .brand{font-size:23px}.waiting-title{padding:30px 0}.waiting-title h1{font-size:34px;letter-spacing:-1px;overflow-wrap:anywhere}.waiting-title p{margin-top:8px;color:var(--muted);font-size:14px}.waiting-v2 h2{font-size:19px}.waiting-v2 .section-heading>span{color:var(--muted);font-size:14px}.waiting-players{list-style:none;padding:0;margin:14px 0 18px}.waiting-players li{display:flex;align-items:center;gap:14px;border-top:1px solid var(--rule);padding:14px 0}.waiting-players li:last-child{border-bottom:1px solid var(--rule)}.waiting-players li>div{flex:1;min-width:0}.waiting-players strong{display:block;overflow-wrap:anywhere}.waiting-players small{display:block;color:var(--muted);margin-top:4px;text-transform:capitalize}.bot-controls{display:flex;gap:10px}.bot-controls select{flex:1}.waiting-invite{display:flex;flex-direction:column;gap:12px;padding-top:20px}.waiting-actions{display:flex;align-items:center;gap:20px;margin:26px 0 10px}.waiting-actions>.primary-button{min-width:180px}.waiting-settings{margin-top:26px;border-top:1px solid var(--rule);padding-top:14px}.waiting-settings summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted);font-size:14px}.waiting-settings summary:after{content:' +';margin-left:auto}.waiting-settings label{display:block;font-size:14px;margin:10px 0}.waiting-settings select{width:100%;margin-bottom:10px}.waiting-settings>.danger-link{display:block;margin-top:10px}
@media(max-width:760px){.table-v2{gap:9px;padding:0 8px max(12px,env(safe-area-inset-bottom));min-height:570px}.table-header{height:52px;gap:8px}.table-header h1{font-size:15px}.table-header>button{font-size:13px}.table-header .menu-anchor>button{font-size:16px}.opponents{gap:10px;justify-content:space-around;padding-top:3px}.opponent{flex:1;max-width:110px;gap:3px}.opponent .lake-avatar{width:2.65rem!important;height:2.65rem!important}.opponent strong{font-size:13px}.opponent small{font-size:10px;white-space:normal}.opponent-current strong:after{display:none}.opponent-current strong{color:#d7ebc8}.contract-line{font-size:11px;gap:8px;min-height:23px}.contract-line strong{font-size:13px}.felt-table{padding:20px 10px;min-height:155px;border-radius:8px}.draw-piles{gap:25px}.draw-piles .playing-card.big,.draw-piles .card-back.big{--cw:4.1rem;--ch:5.8rem}.draw-piles>div{gap:7px}.draw-piles>div>span{font-size:12px}.empty-discard{width:4.1rem;height:5.8rem}.card-back{border-width:3px}.table-melds{padding-top:18px;gap:15px}.table-melds .playing-card.small{--cw:2.85rem;--ch:4.05rem}.decision-dock{padding:12px 13px;border-radius:8px}.decision-heading h2{font-size:18px;letter-spacing:-.3px}.decision-dock p{font-size:13px;line-height:1.35;margin-top:5px}.decision-actions{gap:8px;margin-top:10px}.decision-actions button{font-size:16px;min-height:46px;padding:10px}.decision-dock>small{font-size:11px;margin-top:7px}.decision-timer{gap:5px;font-size:11px}.decision-timer button{padding:6px;min-height:44px}.hand-v2{padding:0 12px 5px;border-radius:8px}.hand-v2 header{font-size:13px}.hand-v2 header .text-button{font-size:13px}.hand-scroll{padding:12px 3px 8px}.hand-v2 .playing-card{--cw:4.3rem;--ch:6.1rem}.hand-slot{margin-left:-24px}.pc-corner{gap:1px}.staging-panel{max-height:31dvh}.waiting-v2{margin:12px 8px;padding:15px 20px 25px}.waiting-header{gap:8px}.waiting-header .brand{font-size:20px}.waiting-header .text-button{font-size:12px}.waiting-title{padding:25px 0}.waiting-title h1{font-size:28px}.bot-controls{flex-wrap:wrap}.bot-controls select{width:100%}.waiting-actions>.primary-button{min-width:0;flex:1}.waiting-invite>.outline-button{width:100%}}
@media(max-width:360px){.table-header h1{font-size:13px}.table-header>button{font-size:12px}.opponent .lake-avatar{width:2.35rem!important;height:2.35rem!important}.opponent strong{font-size:12px}.decision-heading h2{font-size:16px}.decision-actions button{font-size:14px}.contract-line{font-size:10px}.contract-line strong{font-size:12px}}
@media(max-height:670px) and (max-width:760px){.table-v2{gap:6px}.table-header{height:45px}.opponent .lake-avatar{width:2.2rem!important;height:2.2rem!important}.felt-table{padding:12px 8px;min-height:130px}.decision-dock{padding:8px 11px}.decision-heading h2{font-size:16px}.decision-dock p{font-size:12px}.decision-actions{margin-top:7px}.hand-v2 .playing-card{--cw:4rem;--ch:5.65rem}.hand-slot{margin-left:-20px}}

.join-requests{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}.join-requests>h2{font-size:19px;margin-bottom:6px}.join-requests ul{list-style:none;margin:8px 0 0;padding:0}.join-requests li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--rule)}.join-requests li>strong{flex:1;min-width:100px;overflow-wrap:anywhere}.join-requests li>div{display:flex;gap:8px}.join-requests button{min-height:44px;padding:10px 14px}.invite-dialog .join-requests{margin:0;padding:0;border:0}@media(max-width:440px){.join-requests li>div{width:100%}.join-requests li>div>button{flex:1}}
/* An ivory game sheet on the shared wooden table. Decorative edge props from
   the concept are intentionally omitted so every visible object has a purpose. */
.account-page{min-height:100svh;padding:48px 24px;color:#30281f;display:flex;justify-content:center;align-items:flex-start}
.account-sheet{--muted:#775f4e;--pine:#1d4736;--brass:#416848;--rule:#d5cabc;width:min(1060px,100%);padding:32px 48px 24px;background:#fbf8ef;border:1px solid #e3ddcf;border-radius:15px;box-shadow:0 12px 28px #160b0650;min-width:0}
.account-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:46px}
.account-brand{font-family:Georgia,'Times New Roman',serif;font-size:30px;font-weight:600;color:#174632;white-space:nowrap}
.account-profile-button{display:flex;align-items:center;gap:12px;background:none;border:0;color:#30281f;font-size:18px;padding:0;max-width:50%}
.account-profile-button>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-sheet h1{font-family:inherit;font-size:44px;line-height:1.12;letter-spacing:-.035em;font-weight:650;color:#30251e;margin:0 0 10px}
.account-sheet h2{font-family:inherit;font-size:21px;line-height:1.25;font-weight:600;color:#30251e;margin:0}
.account-subtitle{font-size:18px;color:#775f4e;line-height:1.55;margin:0}
.account-title-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.account-primary,.account-outline,.account-google{border-radius:8px;min-height:48px;padding:11px 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.3;text-decoration:none;text-align:center}
.account-primary{background:#214c38;border:1px solid #214c38;color:#fff}
.account-primary:hover{background:#163c2a}
.account-outline{background:transparent;border:1.5px solid #25533e;color:#1c4933}
.account-outline:hover{background:#e5ecdf}
.account-link{background:none;border:0;color:#24533c;text-decoration:underline;text-underline-offset:3px;font:inherit;padding:5px 0;min-height:36px}
.account-link:hover{color:#0c3020}
.account-sheet button:disabled{opacity:.55;cursor:default}
.account-sheet button:focus-visible,.account-sheet input:focus-visible,.account-sheet summary:focus-visible{outline:3px solid #54784c;outline-offset:4px}
.account-sheet input:not([type=checkbox]){color:#30281f;background:#fffdf7;border:1px solid #bfb8ab;border-radius:8px;min-height:49px;padding:12px 15px;font-family:inherit;font-size:16px;min-width:0;width:100%;box-shadow:none}
.account-sheet input::placeholder{color:#837569}
.account-sheet label,.account-sheet legend{font-size:15px;font-weight:600;display:block;margin-bottom:9px;color:#493c30}
.account-games>ul{list-style:none;margin:0;padding:0}
.account-game-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 150px;align-items:center;gap:22px;padding:27px 0;border-bottom:1px solid #d1c6b7}
.account-room-name h2{overflow-wrap:anywhere;font-size:23px}
.account-room-name p{color:#80624d;margin:8px 0 0;font-size:16px;line-height:1.45}
.account-room-members{text-align:center;min-width:0}
.account-room-members p{font-size:13px;color:#80624d;line-height:1.4;margin:8px 0 0;overflow-wrap:anywhere}
.account-avatar-stack{display:flex;justify-content:center;padding-left:8px}
.account-avatar-stack>*{margin-left:-8px;border:2px solid #fbf8ef;border-radius:50%}
.account-room-actions{text-align:center;position:relative}
.account-room-actions>.account-outline{width:100%}
.account-room-menu{font-size:12px;margin-top:5px;color:#766251}
.account-room-menu summary{cursor:pointer;list-style:none;min-height:25px;padding:4px}
.account-room-menu summary::-webkit-details-marker{display:none}
.account-room-menu .account-link{font-size:12px;color:#8a3430}
.account-empty{padding:34px 0 36px;line-height:1.6;color:#7c6755;border-bottom:1px solid #d1c6b7}
.account-empty p{margin:10px 0 0}
.account-inline-form{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px}
.account-invitation{margin-top:30px}
.account-invitation h2{margin-bottom:14px}
.account-invitation-note{color:#31513a;background:#e9efdf;border-radius:8px;padding:12px 15px;line-height:1.5;margin:0 0 13px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.account-watch-invite{font-size:14px;margin-top:8px}
.account-practice{margin-top:22px;display:inline-block;font-size:16px}
.account-recovery-shortcut{margin:22px 0 0 24px;font-size:14px;color:#79604e}
.account-footer{margin-top:34px;text-align:center;color:#756556;font-size:12px}
.account-footer summary{cursor:pointer;list-style:none;display:inline-block;padding:8px;min-height:34px}
.account-footer summary::-webkit-details-marker{display:none}
.account-footer p{max-width:450px;line-height:1.6;margin:12px auto}
.account-new-game{background:#f0eee3;border-radius:10px;padding:22px;margin:24px 0 10px}
.account-help{font-size:13px;color:#766554;line-height:1.6}
.account-error{color:#983d32;font-size:14px;line-height:1.5;padding:14px 0}
.account-editor{max-width:730px;margin:0 auto}
.account-back{font-size:14px;margin-bottom:18px}
.account-editor .account-subtitle{font-size:16px;margin-bottom:28px}
.account-editor form>input{max-width:440px}
.account-editor fieldset{border:0;padding:0;margin:28px 0}
.account-avatar-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px;margin:15px 0}
.account-avatar-option{display:flex;align-items:center;flex-direction:column;gap:12px;font-size:12px;color:#665241}
.account-sheet .account-photo-option{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:14px;font-weight:400}
.account-photo-option input{width:18px;height:18px;accent-color:#214c38}
.account-recovery{border-top:1px solid #d1c6b7;margin-top:30px;padding-top:22px;font-size:14px}
.account-recovery summary{cursor:pointer;color:#244a35;font-weight:600;padding:8px 0}
.account-recovery>p{line-height:1.6;color:#77614f}
.account-recovery ul{list-style:none;padding:0;margin:0}
.account-recovery li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid #ded4c6}
.account-recovery li p{color:#816c58;font-size:12px;line-height:1.4;margin:6px 0 0}
.account-recovery .account-outline{font-size:13px;padding:8px 14px;flex-shrink:0}
.account-signout{margin-top:28px}.account-signout p{font-size:12px;color:#816c58;margin-top:6px}
.account-signin{align-items:center}
.account-signin .account-sheet{max-width:610px;padding:34px 48px 24px}
.account-signin .account-header{margin-bottom:46px}
.account-welcome{max-width:440px;margin:auto;padding-bottom:12px}
.account-welcome h1{font-size:49px;line-height:1.08;margin-bottom:20px}
.account-welcome>p:first-of-type{font-size:18px;line-height:1.55;color:#7d634d;margin-bottom:28px}
.account-google{width:100%;color:#2d332d;background:#fff;border:1px solid #bdb8ac;font-family:inherit;font-size:17px;font-weight:500;min-height:52px}
.account-google:hover{background:#f4f6ef}
.account-welcome .account-help{margin:13px 0 0}
.account-welcome .account-practice{display:block;text-align:center;margin:24px auto 0}
.account-auth-status{color:#695c4c;line-height:1.5}.account-auth-status button{display:block;margin-top:12px}
@media(max-width:700px){
  .account-page{padding:16px 12px;align-items:flex-start}.account-sheet{padding:23px 23px 17px;border-radius:12px}
  .account-header{margin-bottom:32px}.account-brand{font-size:25px}.account-profile-button{font-size:15px;gap:8px}
  .account-profile-button .player-monogram,.account-profile-button .player-avatar{width:2.35rem!important;height:2.35rem!important}
  .account-sheet h1{font-size:33px}.account-subtitle{font-size:15px}.account-title-row{gap:12px;align-items:flex-start;margin-bottom:12px}
  .account-title-row>.account-primary{font-size:14px;padding:11px 13px;white-space:nowrap;min-height:43px}
  .account-game-row{grid-template-columns:minmax(0,1fr) 100px;gap:13px;padding:23px 0}
  .account-room-name h2{font-size:20px}.account-room-name p{font-size:14px;margin-top:5px}
  .account-room-members{grid-column:1;text-align:left;grid-row:2}.account-avatar-stack{justify-content:flex-start}
  .account-room-members p{font-size:12px}.account-avatar-stack>*{width:2.25rem!important;height:2.25rem!important}
  .account-room-actions{grid-column:2;grid-row:1 / span 2}.account-room-actions>.account-outline{font-size:15px;padding:10px 12px}
  .account-inline-form{grid-template-columns:minmax(0,1fr)}.account-inline-form>.account-primary{width:100%;min-height:46px}
  .account-invitation{margin-top:25px}.account-invitation h2{font-size:20px}.account-invitation-note{font-size:13px}
  .account-recovery-shortcut{display:block;margin:10px 0 0}.account-footer{margin-top:26px}.account-new-game{padding:17px;margin-top:20px}
  .account-avatar-options{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.account-editor .account-subtitle{font-size:14px}
  .account-signin .account-sheet{padding:25px 25px 18px}.account-signin .account-header{margin-bottom:45px}
  .account-welcome h1{font-size:43px}.account-welcome>p:first-of-type{font-size:16px}.account-signin{padding-top:28px}
}
@media(prefers-reduced-motion:reduce){.account-sheet *{scroll-behavior:auto;transition:none}}
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-emerald-900: oklch(37.8% .077 168.94);
    --color-emerald-950: oklch(26.2% .051 172.552);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-wide: .025em;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .fixed {
    position: fixed;
  }

  .inset-0 {
    inset: 0;
  }

  .z-50 {
    z-index: 50;
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mb-1 {
    margin-bottom: var(--spacing);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .flex {
    display: flex;
  }

  .table {
    display: table;
  }

  .h-full {
    height: 100%;
  }

  .max-h-36 {
    max-height: calc(var(--spacing) * 36);
  }

  .max-h-full {
    max-height: 100%;
  }

  .min-h-\[4\.2rem\] {
    min-height: 4.2rem;
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-full {
    width: 100%;
  }

  .max-w-\[92vw\] {
    max-width: 92vw;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .min-w-\[10\.5rem\] {
    min-width: 10.5rem;
  }

  .flex-1 {
    flex: 1;
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .self-center {
    align-self: center;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-l-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\!border-amber-500\/50 {
    border-color: #f99c0080 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!border-amber-500\/50 {
      border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent) !important;
    }
  }

  .border-emerald-800 {
    border-color: var(--color-emerald-800);
  }

  .border-emerald-800\/50 {
    border-color: #005f4680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-800\/50 {
      border-color: color-mix(in oklab, var(--color-emerald-800) 50%, transparent);
    }
  }

  .border-emerald-800\/60 {
    border-color: #005f4699;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-800\/60 {
      border-color: color-mix(in oklab, var(--color-emerald-800) 60%, transparent);
    }
  }

  .border-white\/5 {
    border-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/5 {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/70 {
    background-color: #000000b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/70 {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }

  .bg-black\/80 {
    background-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .bg-emerald-900 {
    background-color: var(--color-emerald-900);
  }

  .bg-emerald-950\/55 {
    background-color: #002c228c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-950\/55 {
      background-color: color-mix(in oklab, var(--color-emerald-950) 55%, transparent);
    }
  }

  .bg-emerald-950\/70 {
    background-color: #002c22b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-950\/70 {
      background-color: color-mix(in oklab, var(--color-emerald-950) 70%, transparent);
    }
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[0\.65rem\] {
    font-size: .65rem;
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .text-amber-200 {
    color: var(--color-amber-200);
  }

  .text-amber-300 {
    color: var(--color-amber-300);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-emerald-50\/90 {
    color: #ecfdf5e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-50\/90 {
      color: color-mix(in oklab, var(--color-emerald-50) 90%, transparent);
    }
  }

  .text-emerald-100\/75 {
    color: #d0fae5bf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-100\/75 {
      color: color-mix(in oklab, var(--color-emerald-100) 75%, transparent);
    }
  }

  .text-emerald-100\/80 {
    color: #d0fae5cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-100\/80 {
      color: color-mix(in oklab, var(--color-emerald-100) 80%, transparent);
    }
  }

  .text-emerald-200\/40 {
    color: #a4f4cf66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-200\/40 {
      color: color-mix(in oklab, var(--color-emerald-200) 40%, transparent);
    }
  }

  .text-emerald-200\/50 {
    color: #a4f4cf80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-200\/50 {
      color: color-mix(in oklab, var(--color-emerald-200) 50%, transparent);
    }
  }

  .text-emerald-200\/60 {
    color: #a4f4cf99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-200\/60 {
      color: color-mix(in oklab, var(--color-emerald-200) 60%, transparent);
    }
  }

  .text-emerald-200\/70 {
    color: #a4f4cfb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-200\/70 {
      color: color-mix(in oklab, var(--color-emerald-200) 70%, transparent);
    }
  }

  .text-emerald-200\/85 {
    color: #a4f4cfd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-200\/85 {
      color: color-mix(in oklab, var(--color-emerald-200) 85%, transparent);
    }
  }

  .text-emerald-300 {
    color: var(--color-emerald-300);
  }

  .text-emerald-300\/60 {
    color: #5ee9b599;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-300\/60 {
      color: color-mix(in oklab, var(--color-emerald-300) 60%, transparent);
    }
  }

  .text-emerald-300\/70 {
    color: #5ee9b5b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-300\/70 {
      color: color-mix(in oklab, var(--color-emerald-300) 70%, transparent);
    }
  }

  .text-red-300 {
    color: var(--color-red-300);
  }

  .italic {
    font-style: italic;
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (hover: hover) {
    .hover\:bg-amber-300:hover {
      background-color: var(--color-amber-300);
    }

    .hover\:bg-emerald-800:hover {
      background-color: var(--color-emerald-800);
    }

    .hover\:text-amber-200:hover {
      color: var(--color-amber-200);
    }

    .hover\:text-red-200:hover {
      color: var(--color-red-200);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }
}

:root {
  --paper: #f4eee2;
  --surface: #faf6ed;
  --pine: #1c4534;
  --felt: #174f3c;
  --brass: #b18b50;
  --muted: #796852;
  --rule: #d9cdbb;
  --red: #9c3433;
  color: #29251e;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  background: #61412b;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  color: #29251e;
  background: #785138 url("../art/walnut-retro-v2.png") center / 900px;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
}

#root {
  min-height: 100vh;
}

button, input, select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: .45;
}

button, input, select, summary {
  touch-action: manipulation;
}

button {
  transition: background .15s, color .15s;
}

button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #b78e4d;
}

input:not([type="checkbox"]), select {
  color: #29251e;
  background: #fffaf3;
  border: 1px solid #c5b9a7;
  border-radius: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font-size: 16px;
}

input::placeholder {
  color: #8b8175;
}

select {
  padding-right: 26px;
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3 {
  font-family: inherit;
  font-weight: 600;
}

a {
  color: inherit;
}

.brand {
  letter-spacing: -.5px;
  color: var(--pine);
  white-space: nowrap;
  font: 700 28px Georgia, serif;
}

.brand-period {
  display: none;
}

.app-shell {
  min-height: 100vh;
}

.sync-lock {
  pointer-events: none;
  opacity: .72;
}

.connection-banner {
  z-index: 80;
  color: #4b401f;
  text-align: center;
  border-bottom: 1px solid var(--brass);
  background: #efe0b9;
  padding: 12px 20px;
  font-size: 14px;
  position: sticky;
  top: 0;
}

.toast {
  z-index: 100;
  background: var(--pine);
  max-width: min(90vw, 620px);
  color: var(--surface);
  border: 1px solid #638271;
  border-radius: 8px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 32px #201a1738;
}

.toast button {
  min-width: 32px;
  min-height: 32px;
  color: inherit;
  background: none;
  border: 0;
  font-size: 24px;
}

.text-button {
  min-height: 44px;
  color: var(--pine);
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 0;
  font-size: 14px;
}

.text-button:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.primary-button, .outline-button {
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: inline-flex;
}

.primary-button {
  background: var(--pine);
  border: 1px solid var(--pine);
  color: #fcf8ef;
}

.primary-button:hover:not(:disabled) {
  background: #2c5942;
}

.outline-button {
  border: 1px solid var(--pine);
  color: var(--pine);
  background: none;
}

.outline-button:hover:not(:disabled) {
  background: #e7e8db;
}

.danger-link {
  color: var(--red) !important;
}

.form-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.section-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.ui-icon {
  vertical-align: -.18em;
  flex-shrink: 0;
  display: inline-block;
}

.avatar-button {
  background: none;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  display: inline-flex;
}

.lake-avatar {
  background-repeat: no-repeat;
  background-size: 300% 200%;
  border: 2px solid #f8f2e0;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  box-shadow: 0 1px 4px #22180840;
}

.lake-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.avatar-selected {
  outline-offset: 3px;
  outline: 3px solid #45825f;
}

.glass-panel, .felt-panel {
  background: var(--surface);
  color: #29251e;
  border: 1px solid var(--rule);
}

.glass-panel [class*="text-emerald-"], .felt-panel [class*="text-emerald-"] {
  color: #645d4f !important;
}

.glass-panel [class*="text-amber-"], .felt-panel [class*="text-amber-"] {
  color: var(--pine) !important;
}

.glass-panel [class*="border-emerald-"] {
  border-color: var(--rule);
}

.glass-panel [class*="bg-emerald-"] {
  color: var(--pine);
  background: #e8e6d9;
}

.glass-panel button[class*="bg-amber-"] {
  background: var(--pine);
  color: var(--surface);
}

.glass-panel button {
  min-height: 44px;
}

.glass-panel button[aria-label="Close dialog"] {
  min-width: 44px;
}

.glass-panel table {
  border-collapse: collapse;
}

.glass-panel td, .glass-panel th {
  padding-top: 10px;
  padding-bottom: 10px;
}

.v2-overlay {
  z-index: 60;
  background: #15120fb3;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.chat-dialog {
  width: 420px;
  max-width: 100%;
}

.invite-dialog {
  border-radius: 12px;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 450px;
  padding: 24px;
  display: flex;
}

.playing-card, .card-back {
  --cw: 6.8rem;
  --ch: 9.6rem;
  width: var(--cw);
  height: var(--ch);
  background: var(--surface);
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid #c8c7bd;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 0;
  font-family: Georgia, Times New Roman, serif;
  font-weight: 700;
  transition: transform .16s, box-shadow .16s;
  position: relative;
  box-shadow: 0 2px 5px #172b2a24;
}

.playing-card[role="button"] {
  cursor: pointer;
}

.playing-card.selected {
  box-shadow: 0 0 0 3px var(--brass),0 9px 18px #172b2a38;
  z-index: 5;
  transform: translateY(-.8rem);
}

.playing-card.dragging {
  opacity: .35;
}

.pc-corner {
  line-height: 1;
  font-size: calc(var(--cw)*.23);
  z-index: 1;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: absolute;
  top: .22rem;
  left: .3rem;
}

.pc-corner.flip {
  inset: auto .3rem .22rem auto;
  transform: rotate(180deg);
}

.pc-pip, .pc-ace {
  font-size: calc(var(--cw)*.61);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.pc-ace {
  font-size: calc(var(--cw)*.77);
}

.pc-art {
  object-fit: contain;
  pointer-events: none;
  width: 74%;
  height: 66%;
  position: absolute;
  inset: 17% 13%;
}

.playing-card.joker {
  background: #f2ebd9;
  border-color: #c9b98e;
}

.joker-corner {
  color: #997433;
  font-size: calc(var(--cw)*.25);
}

.card-back {
  background-color: var(--pine);
  border: 4px solid var(--surface);
  background-image: url("../art/card-back-v2.png");
  background-position: center;
  background-size: cover;
}

.pile-stack {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 6px;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
}

.pile-stack:disabled {
  opacity: 1;
}

.pile-stack .card-back {
  position: absolute;
  inset: 0;
}

.pile-stack .card-back:first-child {
  transform: translate(4px, 4px);
}

.pile-stack .card-back:nth-child(2) {
  transform: translate(2px, 2px);
}

.pile-stack .card-back:nth-child(3) {
  position: relative;
}

.pile-stack.clickable:hover .card-back:nth-child(3) {
  transform: translateY(-4px);
}

.playing-card, .card-back {
  --cw: 7.6rem;
  --ch: 10.75rem;
  background: #fff;
  border: 1px solid #d8dcda;
  border-radius: 7px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  box-shadow: 0 3px 5px #00160c38;
}

.playing-card.big, .card-back.big {
  --cw: 8rem;
  --ch: 11.3rem;
}

.playing-card.small, .card-back.small {
  --cw: 3.3rem;
  --ch: 4.7rem;
}

.playing-card.selected {
  box-shadow: 0 0 0 3px #d0e3b6, 0 8px 20px #001d1855;
}

.suit-red {
  color: #b72332;
}

.suit-black {
  color: #171c21;
}

.suit-symbol {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  display: block;
}

.pc-corner {
  font-size: calc(var(--cw)*.225);
  gap: 2px;
  font-weight: 600;
  line-height: 1;
  top: 4%;
  left: 5%;
}

.pc-corner .suit-symbol {
  width: .7em;
  height: .7em;
}

.pc-corner.flip {
  bottom: 4%;
  right: 5%;
}

.pc-pips {
  pointer-events: none;
  position: absolute;
  inset: 14% 19%;
}

.pc-pips .pip {
  width: calc(var(--cw)*.185);
  height: calc(var(--cw)*.185);
  position: absolute;
  transform: translate(-50%, -50%);
}

.pc-pips .pip.inverted {
  transform: translate(-50%, -50%) rotate(180deg);
}

.pc-ace {
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.pc-ace .suit-symbol {
  aspect-ratio: 1;
  width: 52%;
  height: auto;
}

.court-print {
  pointer-events: none;
  background-image: url("../art/court-royals-v3.png");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  position: absolute;
  inset: 11% 15%;
}

.court-J {
  background-position: 0 0;
}

.court-Q {
  background-position: 50% 0;
}

.court-K {
  background-position: 100% 0;
}

.playing-card.joker {
  color: #293d56;
  background: #fff;
  border-color: #d8dcda;
}

.joker-index {
  font-size: .48em;
}

.joker-center {
  font-size: calc(var(--cw)*.12);
  letter-spacing: .12em;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 20% 19%;
}

.joker-center > div {
  font-size: calc(var(--cw)*.2);
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.joker-center .suit-symbol:nth-child(2n) {
  color: #b72332;
}

.joker-inverse {
  transform: rotate(180deg);
}

.card-back {
  background-color: #193455;
  background-image: url("../art/card-back-v3.svg");
  background-size: 100% 100%;
  border: 5px solid #fff;
}

.chat-panel {
  background: var(--surface);
  color: var(--pine);
  border: 1px solid var(--rule);
  border-radius: 8px;
  flex-direction: column;
  height: 340px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 8px 28px #203d3424;
}

.chat-panel.inline-chat {
  height: 290px;
  box-shadow: none;
}

.chat-header {
  border-bottom: 1px solid var(--rule);
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  display: flex;
}

.chat-header h2 {
  font-size: 21px;
}

.chat-header button {
  color: var(--muted);
  background: none;
  border: 0;
  font-size: 22px;
}

.chat-messages {
  overscroll-behavior: contain;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  padding: 15px 16px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  overflow-y: auto;
}

.chat-empty {
  color: var(--muted);
}

.chat-message {
  overflow-wrap: anywhere;
}

.chat-message strong {
  color: #896b36;
  font-weight: 600;
}

.chat-message small {
  color: var(--muted);
  font-size: 10px;
}

.chat-form {
  border-top: 1px solid var(--rule);
  gap: 9px;
  padding: 10px;
  display: flex;
}

.chat-form input {
  flex: 1;
  width: 0;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 13px;
}

.chat-form .primary-button {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}