@font-face {
  font-family: 'Jersey 15';
  src: url('Jersey15-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.window .titlebar h1 {
  font: 400 26px/1 'Jersey 15', Georgia, serif;
}
:root{color-scheme:dark;--ink:#161512;--brass:#bfa374;--ivory:#eee9d6;--mute:#b9b1a3;--felt:#22503c;--line:#746348;--pixel:TablePixel,Consolas,monospace;font:15px/1.4 'Segoe UI',sans-serif;color:var(--ivory)}
@font-face{font-family:TablePixel;src:url(assets/m5x7.ttf) format('truetype');font-display:swap}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;align-content:center;justify-items:center;padding:clamp(12px,4vw,52px);background:radial-gradient(ellipse at 48% 52%,#2c3930 0,#202922 38%,#131a16 82%)}button,select{font:inherit;cursor:pointer}button{color:inherit}button:focus-visible,select:focus-visible{outline:2px solid #f2d592;outline-offset:3px}button:disabled,select:disabled{cursor:default;opacity:.56}[hidden]{display:none!important}
/* The outer seven source pixels contain the bevel and gold corner pins. */
.window, dialog {
  border: 14px solid transparent;
  border-image-slice: 7 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 9px 14px #0007);
}
/* Reuse the kit silhouettes. The felt palette applies to the sprite layer only. */
.palette-defs { position: absolute; pointer-events: none; }
.window {
  --frame: 14px;
  position: relative;
  isolation: isolate;
  width: min(100%, 790px);
  border-width: var(--frame);
}
.window::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--frame));
  z-index: -1;
  pointer-events: none;
  border: var(--frame) solid transparent;
  border-image: url('assets/christmas-ui/panel-large-pine.png') 7 fill / var(--frame);
  filter: url(#baize);
}
.titlebar, dialog header {
  --felt-inset: 11px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--felt-inset);
  background: #17372a;
  box-shadow: inset 0 1px #58715a, inset 0 -2px #11271e;
}
.titlebar::before, dialog header::before {
  position: absolute;
  inset: 2px 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: url('assets/game-ui/rail-pattern.png') center / auto 100% repeat-x;
  filter: url(#baize);
  opacity: .55;
}
.nameplate, .rail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  white-space: nowrap;
}
.titlebar .nameplate, dialog header h2 {
  position: relative;
  isolation: isolate;
  margin: 0 auto 0 0;
  padding: 0 12px;
  color: #f5e9c7;
  font: 400 26px/1 'Jersey 15', Georgia, serif;
  text-shadow: 1px 2px #12271c;
}
.nameplate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 4px solid transparent;
  border-image: url('assets/game-ui/title-frame.png') 3 fill / 4px;
  filter: url(#baize) brightness(1.28);
}
.titlebar img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  filter: saturate(.62);
}
.nameplate img { width: 24px; height: 24px; }
.table-rim {
  padding: 10px 11px 13px;
  background:
    repeating-linear-gradient(2deg, transparent 0 3px, #180d0733 4px, transparent 6px),
    linear-gradient(#66513b, #382b20 40%, #514232);
  box-shadow: inset 0 1px #8c7558, inset 0 -2px #1b1612;
}
.cloth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px clamp(16px, 5vw, 43px) 34px;
  background: radial-gradient(ellipse at 48% 20%, #46674955, transparent 70%), var(--felt);
}
/* Only the edges stretch. The transparent center lets the felt show through. */
.cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 48px solid transparent;
  border-image: url('assets/quest-ui/plain-frame.png') 48 / 48px / 0 stretch;
  filter: url(#baize);
  opacity: .76;
  pointer-events: none;
  image-rendering: pixelated;
}
.cloth:before{content:'';position:absolute;inset:0;z-index:-2;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' d='M0 0h96v96H0z'/%3E%3C/svg%3E")}.round,.seat{text-align:center;color:#d1c596;font:17px/1 var(--pixel);letter-spacing:1px}.round{margin-bottom:17px}.seat{display:block;position:absolute;bottom:14px;left:0;right:0;font-size:15px}
.hands{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,7vw,78px)}.hand{min-width:0;text-align:center}.hand-title{display:flex;align-items:center;justify-content:center;gap:11px;height:42px}.hand-title h2{margin:0;font:400 clamp(28px,4.6vw,36px)/1 'Jersey 15',Georgia,serif;color:#e4deb9}.hand-title output{min-width:28px;height:28px;line-height:26px;text-align:center;border:1px solid #9eae85;color:#fff1c6;background:#163c30;font:26px/26px var(--pixel)}.tray{height:clamp(135px,23vw,183px);position:relative;display:grid;place-items:center}.fan{display:flex;align-items:center;justify-content:center;padding:8px}.card{display:block;width:clamp(58px,12vw,96px);height:auto;image-rendering:pixelated;filter:drop-shadow(2px 4px 1px #16271e99)}.card+.card{margin-left:clamp(-27px,-2vw,-9px)}.fan[data-count="3"] .card+.card{margin-left:clamp(-41px,-4.8vw,-27px)}.card:nth-last-child(2):first-child,.fan[data-count="3"] .card:first-child{transform:translateY(3px) rotate(-6deg)}.card:last-child{transform:translateY(3px) rotate(5deg)}.fan[data-count="3"] .card:nth-child(2){transform:translateY(-2px)}
.card { position: relative; aspect-ratio: 2 / 3; flex-shrink: 0; }
.card[data-state="empty"] { visibility: hidden; }
.card[data-state="dealing"] { z-index: 2; }
.card-travel, .card-turn, .card-back, .card-front {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.card-travel { perspective: 620px; }
.card-turn { transform-style: preserve-3d; }
.card-back, .card-front { backface-visibility: hidden; image-rendering: pixelated; }
.card-front, .card[data-state="revealed"] .card-turn { transform: rotateY(180deg); }
.commands.inactive { visibility: hidden; }
.speak {
  --size: 56px;
  position: absolute;
  top: 0;
  right: 1%;
  width: var(--size);
  height: var(--size);
  pointer-events: none;
}
.balloon, .symbol {
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  background-image: url('assets/emotes/bubble-parts.png');
  background-size: calc(8 * var(--size)) var(--size);
  background-position: calc(-1 * var(--cell, 0) * var(--size)) 0;
  background-repeat: no-repeat;
}
.balloon {
  transform-origin: 50% 91%;
  animation: emote-arrive 360ms steps(5, end) both,
             emote-bob 2.6s steps(2, end) 360ms infinite;
}
.symbol { transform-origin: 50% 46%; }
.note  { animation: note-lilt 1.9s steps(3, end) 180ms infinite; }
.cross { animation: cross-shake 2.7s steps(2, end) 250ms infinite; }
.stem  { animation: stem-hop 2.2s steps(3, end) 200ms infinite; transform-origin: 52% 52%; }
.point { animation: point-hop 2.2s steps(2, end) 290ms infinite; }
.dot   { animation: dot-wave 1.5s steps(3, end) infinite; animation-delay: calc(var(--beat) * 130ms); }

@keyframes emote-arrive {
  0% { transform: translateY(4px) scale(.78); }
  45% { transform: translateY(-5px) scale(1.04); }
  75% { transform: translateY(1px) scale(.98); }
  100% { transform: none; }
}
@keyframes emote-bob {
  0%, 36%, 100% { transform: none; }
  16% { transform: translateY(-2px); }
}
@keyframes note-lilt {
  0%, 46%, 100% { transform: none; }
  14% { transform: translate(-1px, -2px) rotate(-9deg); }
  31% { transform: translate(1px, -1px) rotate(7deg); }
}
@keyframes cross-shake {
  0%, 31%, 100% { transform: none; }
  8%, 22% { transform: translateX(-2px) rotate(-5deg); }
  15% { transform: translateX(2px) rotate(5deg); }
}
@keyframes stem-hop {
  0%, 30%, 100% { transform: none; }
  9% { transform: translateY(1px) scaleY(.84); }
  19% { transform: translateY(-1px); }
}
@keyframes point-hop {
  0%, 26%, 100% { transform: none; }
  13% { transform: translateY(-2px); }
}
@keyframes dot-wave {
  0%, 32%, 100% { transform: none; }
  15% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .balloon, .balloon .symbol { animation: none; }
}
.under{height:35px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:#d4d9bc}.tool, .hand-button, .action {
  --face: url('assets/game-ui/button.png');
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
  color: #fff6df;
  font-weight: 600;
  line-height: 1.15;
  image-rendering: pixelated;
}
:is(.tool, .hand-button, .action)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 5px solid transparent;
  border-image: var(--face) 4 fill / 5px;
  filter: url(#baize);
  pointer-events: none;
}
.tool { padding: 6px 11px; font-size: 13px; }
.hand-button { min-width: 65px; padding: 6px 10px; font-size: 14px; }
:is(.tool, .hand-button):hover:enabled::before { filter: url(#baize) brightness(1.17); }
:is(.tool, .hand-button):active:enabled { --face: url('assets/game-ui/button-pressed.png'); }
.action {
  --face: url('assets/christmas-ui/button-cta-idle.png');
  padding: 10px 18px;
  color: #231d10;
  font-weight: 700;
  white-space: nowrap;
}
.action::before { filter: saturate(.58); }
.action:hover:enabled { --face: url('assets/christmas-ui/button-cta-hover.png'); }
.action:active:enabled { --face: url('assets/christmas-ui/button-cta-pressed.png'); }
.dealer{padding:15px 20px 18px;--mute:#f1f1db}.status{min-height:24px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.status strong{font:400 23px/1 'Jersey 15',Georgia,serif;color:#f2e8d0}.status span{font-size:13px;color:var(--mute)}.commands{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.call{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.call>span{font-size:12px;color:var(--mute);margin-right:7px}.call button{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid transparent;border-radius:3px;background:transparent;color:#fff8e8;font-size:13px}.call img{width:24px;height:24px;image-rendering:pixelated}.call button:hover:enabled{background:#484438}.call button[aria-pressed="true"]{border-color:#998052;background:#433d2e;color:#fff1cd}.call button:disabled{opacity:.66}.call button[aria-pressed="true"]:disabled{opacity:1}.commands:has(.call[hidden]):has(.action[hidden]){display:none}
dialog {
  width: min(415px, calc(100% - 26px));
  max-height: 85svh;
  padding: 0;
  background: transparent;
  border-image-source: url('assets/christmas-ui/panel-medium-snow.png');
  color: #193125;
  color-scheme: light;
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #10140eca; }
dialog header { flex: none; }
.paper { overflow: auto; padding: 6px 14px 13px; }
.paper p { font-size: 14px; }
.paper .note { font-size: 12px; color: #415749; }
.mode { display: flex; gap: 10px; align-items: center; }
.mode select { padding: 5px; color: #193125; background: #fff; border: 1px solid #73877b; }
.paper ol { padding-inline-start: 28px; }
.paper li { padding: 5px 3px; border-bottom: 1px solid #b3c5ba; }
.paper li::marker { color: #445b4a; }
@media(max-width:550px){body{padding:8px}.cloth{padding:18px 6px 24px}.round{margin-bottom:10px}.hands{column-gap:13px}.tray{height:130px}.hand-title{gap:7px}.hand-title output{min-width:24px;height:24px;font-size:24px;line-height:22px}.speak{--size:42px;right:0;top:-4px}.dealer{padding:13px 12px}.commands{align-items:flex-end;gap:6px}.call{gap:0}.call>span{width:100%;margin-bottom:2px}.call button{padding:3px 5px;font-size:12px}.call img{width:19px;height:19px}.action{padding:7px 11px;font-size:13px}.status{gap:3px 9px}.table-rim{padding:6px}.window{--frame:9px}.window,dialog{border-width:9px}.titlebar,dialog header{--felt-inset:6px;padding:6px var(--felt-inset);gap:4px}.titlebar .nameplate{padding:0 8px}.nameplate,.rail-button{gap:4px}.rail-button .wide-label{display:none}.rail-button>span::first-letter{text-transform:uppercase}.hand-button{min-width:45px;padding:5px 6px;font-size:13px}.tool{padding:5px 8px}.seat{bottom:7px;font-size:13px}}
@media(max-width:365px){.call button{gap:3px;padding:3px 2px}.titlebar h1{font-size:18px}.tray{height:109px}.card{width:53px}.speak{top:-6px}.status span{font-size:12px}}