:root { --plum-950:#25141f; --plum-900:#301b2a; --plum-800:#48263d; --plum-700:#63334f; --paper:#f1e8d8; --paper-light:#fffaf0; --ink:#21191e; --red:#e75d58; --rose:#d998a8; --yellow:#efb847; --sans:"DM Sans",sans-serif; --serif:"DM Serif Display",Georgia,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.8rem 1rem; background:var(--yellow); color:var(--ink); }
.skip-link:focus { top:0; }
.site-header { height:96px; display:flex; align-items:center; justify-content:space-between; width:min(1440px,calc(100% - 96px)); margin:0 auto; border-bottom:1px solid rgba(33,25,30,.18); }
.brand { display:inline-flex; align-items:center; gap:.75rem; }
.brand-mark { display:grid; grid-template-columns:1fr 1fr; place-items:center; width:44px; height:44px; border:1px solid currentColor; border-radius:50%; font-size:.85rem; transform:rotate(-7deg); }
.brand-mark span:last-child { color:var(--red); }
.brand-name { font-size:.72rem; font-weight:700; line-height:1.05; letter-spacing:.12em; text-transform:uppercase; }
.site-header nav { display:flex; gap:2rem; font-size:.82rem; }
.site-header nav a { border-bottom:1px solid transparent; }
.site-header nav a:hover { border-color:currentColor; }
.game-intro { display:flex; align-items:end; justify-content:space-between; gap:4rem; width:min(1440px,calc(100% - 96px)); margin:0 auto; padding:72px 0 42px; }
.eyebrow { display:flex; align-items:center; gap:.65rem; margin:0 0 1rem; color:#685c63; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow span { width:26px; height:1px; background:var(--red); }
.game-intro h1 { margin:0; color:var(--plum-900); font-family:var(--serif); font-size:clamp(4rem,7vw,7.5rem); font-weight:400; line-height:.8; letter-spacing:-.04em; }
.game-intro > p { max-width:450px; margin:0; color:#655b60; line-height:1.7; }
.game-shell { position:relative; background:var(--plum-950); color:var(--paper-light); }
.game-topbar { min-height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 max(48px,calc((100vw - 1440px)/2)); border-bottom:1px solid rgba(255,255,255,.13); }
.score-strip { display:flex; align-items:center; gap:.8rem; color:#c9adb9; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; }
.score-strip > span { color:var(--yellow); font-weight:700; }
.score-strip strong { font-weight:500; }
.score-strip b { display:inline-grid; place-items:center; min-width:22px; height:22px; margin-left:.2rem; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; }
.round-data { display:flex; gap:1.2rem; color:#bca3ae; font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; }
.round-data b { color:#fff; }
.round-data span:last-child { color:var(--yellow); }
.quiet-button { justify-self:end; padding:.6rem .9rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:transparent; color:#d3bdc6; font-size:.72rem; cursor:pointer; }
.quiet-button:hover { background:rgba(255,255,255,.08); color:#fff; }
.table-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:760px; }
.felt-table { position:relative; min-height:760px; overflow:hidden; background:var(--plum-800); }
.felt-table::before { content:""; position:absolute; width:735px; height:735px; left:50%; top:48%; border:1px solid rgba(255,255,255,.1); border-radius:50%; transform:translate(-50%,-50%); box-shadow:inset 0 0 0 95px rgba(37,20,31,.08),inset 0 0 0 96px rgba(255,255,255,.04); }
.felt-table::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.heart-rings { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.03); font-size:14rem; }
.player-seat { position:absolute; z-index:5; display:flex; align-items:center; gap:.65rem; padding:.45rem .85rem .45rem .45rem; border:1px solid transparent; border-radius:999px; transition:160ms ease; }
.player-seat.is-turn { border-color:var(--yellow); background:rgba(239,184,71,.1); box-shadow:0 0 0 4px rgba(239,184,71,.07); }
.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--red); font-family:var(--serif); }
.avatar.north { background:var(--yellow); color:var(--ink); }
.avatar.west { background:#9875ae; }
.avatar.east { background:#d67478; }
.avatar.you { background:var(--paper); color:var(--ink); }
.player-details { display:flex; flex-direction:column; }
.player-details strong { font-size:.76rem; }
.player-details small { color:#c7b2bc; font-size:.59rem; letter-spacing:.05em; text-transform:uppercase; }
.player-details b { color:#fff; }
.seat-north { left:50%; top:24px; transform:translateX(-50%); }
.seat-south { left:50%; bottom:190px; transform:translateX(-50%); }
.seat-west { left:22px; top:44%; transform:translateY(-50%); }
.seat-east { right:22px; top:44%; transform:translateY(-50%); }
.card-stack { position:absolute; width:90px; height:55px; top:54px; left:50%; transform:translateX(-50%); }
.card-back-mini { position:absolute; width:33px; height:47px; border:2px solid var(--paper); border-radius:4px; background:var(--red); box-shadow:0 4px 8px rgba(0,0,0,.25); }
.card-back-mini::after { content:"♥"; position:absolute; inset:3px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.65); color:rgba(255,255,255,.85); font-size:.6rem; }
.stack-side { top:50%; left:auto; }
.seat-west .stack-side { left:calc(100% + 8px); transform:translateY(-50%); }
.seat-east .stack-side { right:calc(100% + 8px); transform:translateY(-50%); }
.stack-side .card-back-mini { transform:rotate(90deg); }
.trick-area { position:absolute; z-index:3; width:340px; height:330px; left:50%; top:46%; transform:translate(-50%,-50%); }
.played-slot { position:absolute; width:74px; height:105px; border:1px dashed rgba(255,255,255,.12); border-radius:8px; }
.slot-north { left:50%; top:0; transform:translateX(-50%); }
.slot-south { left:50%; bottom:50px; transform:translateX(-50%); }
.slot-west { left:20px; top:50%; transform:translateY(-60%) rotate(-7deg); }
.slot-east { right:20px; top:50%; transform:translateY(-60%) rotate(7deg); }
.heart-status { position:absolute; left:50%; top:50%; display:flex; align-items:center; gap:.35rem; padding:.38rem .65rem; border-radius:999px; background:rgba(37,20,31,.48); color:#c9b1bd; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; transform:translate(-50%,-50%); }
.heart-status span { color:var(--rose); font-size:1rem; }
.heart-status.is-broken { color:#fff; }
.heart-status.is-broken span { color:var(--red); }
.turn-message { position:absolute; left:50%; bottom:8px; width:470px; margin:0; color:#f0e8ec; font-size:.72rem; font-weight:600; text-align:center; transform:translateX(-50%); }
.playing-card { position:relative; width:68px; height:100px; flex:0 0 auto; margin-left:-17px; border:0; border-radius:7px; background:var(--paper-light); color:var(--ink); box-shadow:0 9px 18px rgba(0,0,0,.23); cursor:pointer; transition:150ms ease; }
.playing-card:first-child { margin-left:0; }
.playing-card.red { color:var(--red); }
.playing-card:disabled { cursor:not-allowed; opacity:.5; }
.playing-card:hover:not(:disabled),.playing-card:focus-visible:not(:disabled),.playing-card.is-selected { z-index:10; outline:3px solid var(--yellow); outline-offset:2px; transform:translateY(-15px); }
.card-rank { position:absolute; left:7px; top:6px; font-family:var(--serif); font-size:1.15rem; line-height:.78; text-align:center; }
.card-rank small { font-size:.68rem; }
.card-pip { position:absolute; inset:0; display:grid; place-items:center; font-size:1.9rem; }
.played-slot .playing-card { position:absolute; inset:0; margin:0; animation:card-in 180ms ease-out; }
@keyframes card-in { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:scale(1); } }
.human-hand { position:absolute; z-index:6; left:50%; bottom:20px; display:flex; justify-content:center; width:min(900px,calc(100% - 50px)); min-height:135px; transform:translateX(-50%); }
.game-panel { display:flex; flex-direction:column; gap:1.25rem; padding:30px 25px; background:#281722; border-left:1px solid rgba(255,255,255,.12); }
.instruction-card { padding:1.25rem; background:var(--paper); color:var(--ink); }
.panel-kicker { color:var(--red); font-size:.59rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.instruction-card strong { display:block; margin-top:.75rem; font-family:var(--serif); font-size:1.65rem; font-weight:400; }
.instruction-card p { margin:.45rem 0 0; color:#71646b; font-size:.72rem; line-height:1.55; }
.pass-button { width:100%; display:flex; justify-content:space-between; margin-top:1rem; padding:.72rem .85rem; border:0; background:var(--red); color:#fff; font-size:.72rem; font-weight:700; cursor:pointer; }
.pass-button:disabled { background:#c7bbb5; cursor:not-allowed; }
.panel-title { display:flex; justify-content:space-between; padding-bottom:.75rem; border-bottom:1px solid rgba(255,255,255,.12); color:#eadde3; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.panel-title b { color:var(--yellow); }
.round-score-list { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding-top:.8rem; }
.round-score-list div { display:flex; justify-content:space-between; padding:.55rem .65rem; background:rgba(255,255,255,.05); color:#bca5b0; font-size:.68rem; }
.round-score-list b { color:#fff; }
.danger-card { display:flex; gap:.9rem; align-items:center; padding:1rem 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.queen-card { position:relative; flex:0 0 52px; height:72px; border-radius:5px; background:var(--paper-light); color:var(--ink); }
.queen-card span { position:absolute; left:6px; top:5px; font-family:var(--serif); line-height:.7; }
.queen-card b { position:absolute; inset:0; display:grid; place-items:center; font-size:1.5rem; }
.danger-card > div:last-child strong { color:#fff; font-size:.74rem; }
.danger-card p { margin:.3rem 0 0; color:#a9909c; font-size:.66rem; line-height:1.5; }
.fair-play { margin:auto 0 0; padding:1rem; border:1px solid rgba(239,184,71,.22); background:rgba(239,184,71,.06); color:#a9909c; font-size:.68rem; line-height:1.5; }
.fair-play > span { float:left; margin-right:.65rem; color:var(--yellow); font-size:1.2rem; }
.fair-play strong { display:block; color:#f1e8ec; font-size:.7rem; }
.result-dialog { position:absolute; z-index:20; inset:82px 0 0; display:grid; place-items:center; padding:2rem; background:rgba(28,13,23,.86); backdrop-filter:blur(8px); }
.result-dialog[hidden] { display:none; }
.result-card { width:min(520px,100%); padding:3rem; background:var(--paper); color:var(--ink); text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.result-card .eyebrow { justify-content:center; }
.result-card .eyebrow b { font-weight:700; }
.result-card h2 { margin:.7rem 0 1rem; font-family:var(--serif); font-size:3rem; font-weight:400; line-height:1; }
.result-card > p:not(.eyebrow) { color:#6e6268; line-height:1.6; }
.final-scores { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:1.5rem 0; }
.final-scores span { padding:.7rem .3rem; background:#e6dccb; color:#74686e; font-size:.62rem; text-transform:uppercase; }
.final-scores b { display:block; color:var(--ink); font-family:var(--serif); font-size:1.45rem; }
.primary-button { display:inline-flex; align-items:center; justify-content:space-between; gap:2.5rem; min-width:190px; padding:.95rem 1.1rem; border:0; border-radius:999px; background:var(--red); color:#fff; font-weight:700; cursor:pointer; }
.ad-section { padding:54px max(48px,calc((100vw - 1440px)/2)); background:#e7ddcc; border-bottom:1px solid rgba(33,25,30,.13); }
.ad-slot { width:min(970px,100%); min-height:120px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-content:center; gap:.25rem 2rem; margin:0 auto; padding:1.4rem 2rem; border:1px dashed rgba(33,25,30,.28); background:rgba(255,250,240,.42); color:#68736c; }
.ad-slot span { grid-column:1/-1; font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.ad-slot strong { align-self:end; color:#46524b; font-family:var(--serif); font-size:1.35rem; font-weight:400; }
.ad-slot small { align-self:end; color:#7c867f; font-size:.66rem; letter-spacing:.1em; }
.rules { display:grid; grid-template-columns:.9fr 2fr; gap:7rem; padding:130px max(48px,calc((100vw - 1440px)/2)); }
.section-label { font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.section-label span { color:var(--red); margin-right:.7rem; }
.rules-heading h2 { margin:1.5rem 0 2rem; font-family:var(--serif); font-size:clamp(3rem,5vw,5rem); font-weight:400; line-height:.94; letter-spacing:-.035em; }
.rules-heading h2 em { color:var(--red); font-weight:400; }
.rules-heading > p { max-width:430px; color:#655b60; line-height:1.75; }
.rules-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(33,25,30,.2); }
.rules-grid article { min-height:220px; padding:2rem; border-right:1px solid rgba(33,25,30,.2); border-bottom:1px solid rgba(33,25,30,.2); }
.rules-grid article:nth-child(even) { border-right:0; }
.rule-number { color:var(--red); font-size:.68rem; font-weight:700; letter-spacing:.1em; }
.rules-grid h3 { margin:1.7rem 0 .7rem; font-family:var(--serif); font-size:1.65rem; font-weight:400; }
.rules-grid p { margin:0; color:#6e6268; font-size:.88rem; line-height:1.7; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:32px max(48px,calc((100vw - 1440px)/2)); background:var(--plum-950); color:#bda8b2; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:1080px) { .table-layout{grid-template-columns:1fr}.game-panel{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;min-height:auto;border-left:0;border-top:1px solid rgba(255,255,255,.12)}.fair-play{grid-column:1/-1;margin:0}.rules{grid-template-columns:1fr;gap:4rem} }
@media (max-width:760px) { .site-header{width:calc(100% - 36px);height:78px}.site-header nav{gap:1rem;font-size:.72rem}.site-header nav a:first-child{display:none}.game-intro{align-items:flex-start;flex-direction:column;gap:1.5rem;width:calc(100% - 36px);padding:55px 0 32px}.game-topbar{grid-template-columns:1fr;padding:.8rem 18px}.score-strip{grid-column:1;grid-row:1;flex-wrap:wrap;justify-content:center}.round-data{grid-column:1;grid-row:2;justify-content:center}.quiet-button{grid-column:1;grid-row:3;justify-self:center}.table-layout,.felt-table{min-height:680px}.felt-table::before{width:520px;height:520px}.seat-west{left:4px}.seat-east{right:4px}.seat-west .player-details,.seat-east .player-details{display:none}.seat-west .stack-side{left:62px}.seat-east .stack-side{right:62px}.trick-area{width:290px;transform:translate(-50%,-52%) scale(.88)}.seat-south{bottom:158px}.human-hand{bottom:14px;width:calc(100% - 10px);min-height:120px}.playing-card{width:59px;height:88px;margin-left:-29px}.playing-card:first-child{margin-left:0}.game-panel{grid-template-columns:1fr;padding:24px 18px}.ad-section{padding:34px 22px}.ad-slot{min-height:100px;padding:1.15rem}.rules{padding:84px 22px}.rules-grid{grid-template-columns:1fr}.rules-grid article{min-height:auto;padding:1.5rem 0;border-right:0}footer{align-items:flex-start;flex-direction:column;padding:32px 22px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }