:root{color-scheme:dark;--surface-base: #0b1a1c;--surface-table: #12312f;--surface-raised: #16403c;--surface-slot: rgba(255, 255, 255, .05);--surface-overlay: rgba(8, 20, 21, .82);--text-primary: #f2f6f4;--text-secondary: #a9c0bb;--text-muted: #7b948f;--accent: #f0a850;--accent-strong: #f7bd72;--accent-ink: #2a1a05;--positive: #5fbf94;--negative: #e2705f;--line: rgba(255, 255, 255, .11);--line-strong: rgba(255, 255, 255, .2);--radius-card: 9px;--radius-surface: 14px;--radius-pill: 999px;--shadow-card: 0 2px 6px rgba(4, 14, 15, .5);--shadow-lift: 0 12px 28px rgba(4, 14, 15, .55);--card-width: clamp(58px, 8.2vw, 92px);--card-ratio: 234 / 333;--font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--ease: cubic-bezier(.16, 1, .3, 1)}:root[data-theme=light]{color-scheme:light;--surface-base: #eef2ee;--surface-table: #d9e5e0;--surface-raised: #ffffff;--surface-slot: rgba(18, 49, 47, .07);--surface-overlay: rgba(240, 245, 242, .86);--text-primary: #10201f;--text-secondary: #3f5d58;--text-muted: #64807a;--accent: #b56514;--accent-strong: #91500d;--accent-ink: #fff6ea;--positive: #1d7a52;--negative: #a63823;--line: rgba(16, 32, 31, .14);--line-strong: rgba(16, 32, 31, .26);--shadow-card: 0 2px 6px rgba(16, 32, 31, .18);--shadow-lift: 0 12px 28px rgba(16, 32, 31, .2)}@font-face{font-family:Outfit;font-style:normal;font-weight:300 800;font-display:swap;src:url(https://fonts.gstatic.com/s/outfit/v11/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100dvh;background:radial-gradient(120% 90% at 50% 0%,var(--surface-table),var(--surface-base) 72%);background-attachment:fixed;color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.08;font-weight:600}p{margin:0}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.app-shell{min-height:100dvh;display:flex;flex-direction:column}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;height:64px;padding:0 clamp(16px,4vw,40px);background:var(--surface-overlay);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.topbar__brand{display:inline-flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:600;letter-spacing:-.02em;color:var(--text-primary);text-decoration:none}.topbar__nav{display:flex;gap:4px;margin-inline-start:auto}.topbar__nav a{padding:7px 14px;border-radius:var(--radius-pill);color:var(--text-secondary);font-size:.9rem;text-decoration:none;white-space:nowrap;transition:background .16s var(--ease),color .16s var(--ease)}.topbar__nav a:hover{background:var(--surface-slot);color:var(--text-primary)}.topbar__nav a.active{background:var(--accent);color:var(--accent-ink);font-weight:600}.topbar__theme{padding:7px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);font-size:.82rem;transition:border-color .16s var(--ease),color .16s var(--ease)}.topbar__theme:hover{border-color:var(--accent);color:var(--text-primary)}.app-main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px) 64px}@media(max-width:560px){.topbar{gap:8px;padding-inline:12px}.topbar__brand{flex:0 0 auto}.topbar__nav{min-width:0;margin-inline-start:0;overflow-x:auto;scrollbar-width:none}.topbar__nav::-webkit-scrollbar{display:none}.topbar__nav a{padding:6px 10px;font-size:.84rem}.topbar__theme{flex:0 0 auto;padding-inline:10px}}.playing-card{position:relative;display:block;width:var(--card-width);aspect-ratio:var(--card-ratio);padding:0;border:none;border-radius:var(--radius-card);background:transparent;box-shadow:var(--shadow-card);transition:transform .18s var(--ease),box-shadow .18s var(--ease);perspective:800px;touch-action:none}.playing-card__flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .36s var(--ease)}.playing-card.is-facedown .playing-card__flip{transform:rotateY(180deg)}.playing-card.is-flip-in .playing-card__flip{animation:card-flip-in .36s var(--ease) both}@keyframes card-flip-in{0%{transform:rotateY(-180deg)}to{transform:rotateY(0)}}.playing-card__face{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:var(--radius-card);object-fit:cover;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.playing-card__face--back{transform:rotateY(180deg)}.playing-card.is-interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}.playing-card.is-interactive:active{transform:translateY(-1px) scale(.985)}.playing-card.is-selected{transform:translateY(-10px);box-shadow:var(--shadow-lift),0 0 0 3px var(--accent)}.playing-card.is-dragging{opacity:.22}.playing-card.is-playable:after{content:"";position:absolute;inset:0;border-radius:var(--radius-card);box-shadow:inset 0 0 0 2px var(--accent);pointer-events:none}.card-slot{display:grid;place-items:center;width:var(--card-width);aspect-ratio:var(--card-ratio);padding:0;border:1.5px dashed var(--line-strong);border-radius:var(--radius-card);background:var(--surface-slot);color:var(--text-muted);transition:border-color .16s var(--ease),background .16s var(--ease)}button.card-slot:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.card-slot__label{font-size:1.1rem;line-height:1;letter-spacing:.04em;text-align:center;padding:0 4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-slot.is-playable{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.card-motion-clone{position:fixed;inset:0 auto auto 0;z-index:20;margin:0;pointer-events:none;transform-origin:top left}.card-drag-clone{position:fixed;inset:0 auto auto 0;z-index:60;margin:0;pointer-events:none;transform-origin:center;opacity:.92;overflow:visible}.card-drag-clone .playing-card{margin:0!important;transition:none!important;box-shadow:var(--shadow-lift)}.home{display:flex;flex-direction:column;gap:clamp(36px,7vw,72px);padding-top:clamp(12px,4vw,40px)}.home__intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,56px)}.home__title{font-size:clamp(1.85rem,4.4vw,3rem);max-width:20ch}.home__lede{margin-top:16px;max-width:42ch;color:var(--text-secondary);font-size:clamp(1rem,1.6vw,1.12rem)}.home__cta{display:inline-block;margin-top:26px;text-decoration:none}.home__fan{display:flex;justify-content:center;--card-width: clamp(76px, 12vw, 124px)}.home__fan-card{transform:rotate(calc((var(--i) - 1.5) * 7deg)) translateY(calc(abs(var(--i) - 1.5)*7px));margin-inline:calc(var(--card-width) * -.22);transition:transform .3s var(--ease)}.home__fan:hover .home__fan-card{transform:rotate(calc((var(--i) - 1.5) * 10deg)) translateY(calc(abs(var(--i) - 1.5)*5px - 8px))}.home__games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}.game-card{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot);color:inherit;text-decoration:none;transition:border-color .18s var(--ease),transform .18s var(--ease)}.game-card:hover{border-color:var(--accent);transform:translateY(-3px)}.game-card__name{font-size:1.22rem}.game-card__blurb{color:var(--text-secondary);font-size:.92rem}.game-card__players{margin-top:auto;padding-top:10px;color:var(--text-muted);font-size:.78rem}@media(max-width:760px){.home__intro{grid-template-columns:1fr}.home__fan{order:-1}}.game{display:flex;flex-direction:column;gap:22px}.game__header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}.game__title{font-size:clamp(1.7rem,4vw,2.4rem)}.game__subtitle{margin-top:4px;color:var(--text-secondary);font-size:.95rem}.game__controls{display:flex;align-items:center;gap:14px}.game__stat{color:var(--text-secondary);font-size:.86rem}.game__stat-value{font-family:var(--font-mono);font-size:1.05rem;color:var(--text-primary)}.game__hint{color:var(--text-muted);font-size:.84rem;max-width:62ch}.game__how-to{display:grid;gap:8px;max-width:68ch;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot)}.game__how-to h2{font-size:1rem;letter-spacing:-.01em}.game__how-to ol{display:grid;gap:5px;margin:0;padding-left:1.25rem;color:var(--text-secondary);font-size:.88rem}.btn{padding:9px 18px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:transparent;color:var(--text-primary);font-size:.9rem;font-weight:500;white-space:nowrap;transition:transform .14s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn--primary{border-color:transparent;background:var(--accent);color:var(--accent-ink);font-weight:600}.btn--primary:hover{background:var(--accent-strong)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.banner{padding:11px 16px;border-radius:var(--radius-surface);font-size:.92rem;font-weight:500}.banner--win{background:color-mix(in srgb,var(--positive) 18%,transparent);border:1px solid color-mix(in srgb,var(--positive) 45%,transparent);color:var(--text-primary);animation:win-beat .52s var(--ease) both}@keyframes win-beat{0%{transform:scale(.96);opacity:.4}58%{transform:scale(1.018);opacity:1}to{transform:scale(1);opacity:1}}.banner--stuck{background:color-mix(in srgb,var(--negative) 16%,transparent);border:1px solid color-mix(in srgb,var(--negative) 42%,transparent);color:var(--text-primary)}.klondike__top{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,28px);justify-content:space-between}.klondike__stock-group,.klondike__foundations{display:flex;gap:clamp(6px,1.4vw,12px)}.klondike__tableau{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,1.2vw,12px);align-items:start}.klondike__column{display:flex;flex-direction:column;align-items:center;min-height:calc(var(--card-width) / (234 / 333) * 2.2)}.klondike__column>.playing-card+.playing-card{margin-top:calc(var(--card-width) * -1.3)}.klondike__column>.playing-card.is-faceup+.playing-card{margin-top:calc(var(--card-width) * -1.1)}.klondike__column>.playing-card.is-facedown+.playing-card.is-facedown img,.klondike__column>.playing-card.is-facedown+.playing-card.is-faceup img{border-top:1px solid rgba(0,0,0,.45)}@media(max-width:640px){:root{--card-width: clamp(40px, 12.5vw, 62px)}.klondike__top{flex-direction:column;align-items:center;gap:16px}}.game__status{color:var(--text-secondary);font-size:.94rem;min-height:1.5em}.select select{padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-slot);color:var(--text-primary);font:inherit;font-size:.88rem}.c8__seat-label{display:block;margin-bottom:8px;color:var(--text-muted);font-size:.78rem;letter-spacing:.04em}.c8__opponent-cards,.c8__hand-cards{display:flex;flex-wrap:wrap;gap:6px;min-height:calc(var(--card-width) / (234 / 333))}.c8__opponent-cards>.playing-card+.playing-card{margin-left:calc(var(--card-width) * -.55)}.c8__table{display:flex;justify-content:center;gap:clamp(24px,6vw,64px);padding:clamp(18px,4vw,32px);border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot)}.c8__pile{display:flex;flex-direction:column;align-items:center;gap:10px}.c8__pile-label{color:var(--text-secondary);font-size:.8rem;text-align:center}.c8__suit-choice{display:flex;flex-wrap:wrap;gap:8px}.freecell__top{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,28px);justify-content:space-between}.freecell__cells,.freecell__foundations{display:flex;gap:clamp(6px,1.4vw,12px)}.freecell__tableau{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(4px,1.1vw,10px);align-items:start}.freecell__column{display:flex;flex-direction:column;align-items:center;min-height:calc(var(--card-width) / (234 / 333) * 2.2)}.freecell__column>.playing-card+.playing-card{margin-top:calc(var(--card-width) * -1.08)}@media(max-width:900px){.freecell__tableau{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:640px){.freecell__top{flex-direction:column;align-items:center;gap:16px}}.mp__choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}.mp__choice{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:24px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot)}.mp__choice-title{font-size:1.15rem}.mp__choice-text{color:var(--text-secondary);font-size:.9rem}.mp__join{display:flex;gap:8px}.mp__input{width:9ch;padding:9px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--text-primary);font-family:var(--font-mono);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase}.mp__input::placeholder{color:var(--text-muted)}.mp__code-panel{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot)}.mp__code-label{color:var(--text-muted);font-size:.78rem}.mp__code{font-family:var(--font-mono);font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:.18em;color:var(--accent)}.gofish__scores{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,48px);padding:16px 24px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot)}.gofish__score{display:flex;flex-direction:column;gap:2px}.gofish__score-name{color:var(--text-muted);font-size:.76rem}.gofish__score-value{font-family:var(--font-mono);font-size:1.3rem}.gofish__log{display:flex;flex-direction:column;gap:2px;min-height:5.4em}.gofish__log-line{color:var(--text-primary);font-size:.9rem}.gofish__log-line.is-old{color:var(--text-muted);font-size:.82rem}.gofish__ranks{display:flex;flex-wrap:wrap;gap:6px}.gofish__stock{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:.84rem}.hearts__scores{display:flex;flex-wrap:wrap;gap:clamp(10px,3vw,20px);padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot);list-style:none}.hearts__score{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px}.hearts__score-name{color:var(--text-muted);font-size:.76rem;letter-spacing:.03em}.hearts__score-value{font-family:var(--font-mono);font-size:1.1rem;color:var(--text-primary)}.hearts__opponents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,24px)}.hearts__opponent{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}.hearts__opponent.is-active,.hearts__hand.is-active{border-radius:var(--radius-surface);animation:seat-pulse 1.5s var(--ease) infinite}@keyframes seat-pulse{0%,to{box-shadow:inset 0 0 0 1px transparent}50%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 65%,transparent)}}.hearts__seat-label{display:block;color:var(--text-muted);font-size:.78rem;letter-spacing:.04em}.hearts__opponent-count{color:var(--text-secondary);font-size:.82rem}.hearts__opponent-cards{display:flex;--card-width: clamp(26px, 3.4vw, 38px)}.hearts__opponent-cards>.playing-card+.playing-card{margin-left:calc(var(--card-width) * -.74)}@media(max-width:720px){.hearts__opponents{grid-template-columns:1fr}}.hearts__trick{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,4vw,32px);padding:clamp(18px,4vw,32px);min-height:calc(var(--card-width) / (234 / 333) + 30px);border:1px solid var(--line);border-radius:var(--radius-surface);background:var(--surface-slot)}.hearts__trick-card{display:flex;flex-direction:column;align-items:center;gap:8px}.hearts__trick-label{color:var(--text-secondary);font-size:.8rem;text-align:center}.hearts__hand-banner{display:flex;align-items:center;justify-content:space-between;gap:14px}.hearts__pass{display:flex;flex-direction:column;gap:12px}.hearts__hand-cards{display:flex;flex-wrap:wrap;gap:6px;min-height:calc(var(--card-width) / (234 / 333))}
