:root{color-scheme:dark;--bg:#140d25;--panel:#241638;--panel2:#302045;--text:#fff4dd;--muted:#c9bdd8;--gold:#ffd16a;--pink:#f23892;--blue:#405cff;--line:#6d4a75;--shadow:0 14px 38px #08031155;--radius:18px;--space:8px;font-family:Trebuchet MS,Arial,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 20%,#44205744,transparent 55%),var(--bg);color:var(--text);line-height:1.55}html[data-theme=light]{color-scheme:light;--bg:#fff8ee;--panel:#fff;--panel2:#f0e5f6;--text:#291735;--muted:#655171;--line:#d5bbd9;--gold:#815000;--shadow:0 10px 30px #32143f12}a{color:inherit}button,a,input,select{touch-action:manipulation}button,select{font:inherit}button,.button{min-height:44px;border:1px solid var(--line);border-radius:11px;padding:10px 18px;background:var(--panel2);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:bold}button:hover,.button:hover{border-color:var(--gold);filter:brightness(1.1)}button:disabled{opacity:.45;cursor:default}.primary{background:#ffd16a;color:#2a143a;border-color:#ffda86;box-shadow:0 4px 0 #ac6b26}.pink{background:#ad1d68;color:white}button[aria-pressed=true]{background:#6341a0;color:#fff;border-color:#cda9ff}:focus-visible{outline:3px solid #5de9f3;outline-offset:4px}h1,h2,h3,.brand{font-family:Georgia,serif;line-height:1.1}h1{font-size:clamp(2.5rem,5vw,5rem);margin:.2em 0}h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 16px}h3{font-size:1.4rem}p{margin:0 0 16px}.eyebrow{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:bold}.muted{color:var(--muted)}.wrap{width:min(1440px,94%);margin:auto}.skip{position:absolute;top:-90px}.skip:focus{top:8px;z-index:100;background:var(--panel);padding:12px}header{border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:5}.nav{min-height:84px;display:flex;align-items:center;gap:30px}.brand{text-decoration:none;font-size:2rem;letter-spacing:.04em;font-weight:bold;color:var(--gold)}.brand small{display:block;font:10px Trebuchet MS,Arial;letter-spacing:.28em;text-align:center;color:var(--muted)}.navlinks{display:flex;gap:24px;margin-left:auto;align-items:center}.navlinks a{text-decoration:none;font-weight:bold}.hero{position:relative;isolation:isolate;min-height:490px;display:flex;align-items:center;border:1px solid #8b5979;border-radius:24px;overflow:hidden;margin:28px auto;background:#201030;color:#fff4dd;box-shadow:var(--shadow)}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#140b26ed 0%,#190a2599 38%,transparent 70%);z-index:-1}.hero-copy{padding:48px;width:58%;max-width:690px}.hero .eyebrow{color:#ffd16a}.hero p{font-size:1.15rem;max-width:430px;color:#eee0f4}.hero h1 em{color:#ffd16a;font-style:normal}.hero-meta{margin-top:24px;font-size:.85rem;letter-spacing:.04em}.section{margin:42px auto}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:20px}.sectionhead h2{margin:4px 0}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;text-decoration:none;overflow:hidden;box-shadow:var(--shadow);position:relative;transition:transform .18s,border-color .18s}.tile:hover{transform:translateY(-5px);border-color:var(--gold)}.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.tile-body{padding:16px}.tile h3{margin:0 0 6px;font-size:1.25rem}.tile p{font-size:.85rem;color:var(--muted);margin:0}.tag{display:inline-block;border:1px solid var(--line);border-radius:30px;padding:3px 9px;font-size:.75rem;font-weight:bold}.tile .tag{position:absolute;top:10px;left:10px;background:#21122fe8;color:#fff4dd;border-color:#a77d96}.tag.live{background:#ffd16a;color:#291735;border:0}.daily{display:grid;grid-template-columns:1fr 1fr;gap:24px}.feature{display:flex;border:1px solid var(--line);background:var(--panel);border-radius:18px;overflow:hidden;align-items:center}.feature img{width:36%;align-self:stretch;object-fit:cover}.feature>div{padding:24px}.feature h3{margin:8px 0}.ad-slot{border:1px dashed var(--line);min-height:100px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;background:var(--panel)}.ad-slot small{letter-spacing:0;text-transform:none;margin-top:5px}.editorial{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin:48px auto}.editorial p,.editorial li{max-width:75ch}.panel{border:1px solid var(--line);padding:28px;border-radius:18px;background:var(--panel)}footer{margin-top:56px;border-top:1px solid var(--line);padding:28px 0;color:var(--muted)}.footerrow{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.footerrow a{margin-right:20px}.crumb{font-size:.9rem;margin:22px auto;color:var(--muted)}.gameheading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px auto}.gameheading h1{font-size:2.5rem}.gameheading p{margin:4px 0}.game-shell{border:1px solid #987153;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#251232;color:#fff4dd}.game-scenery{height:94px;background:linear-gradient(0deg,#261433,transparent),url('assets/carnival.webp') center 43%/cover}.gamebar{display:flex;justify-content:space-between;align-items:center;padding:10px 24px;border-bottom:1px solid #73526c;background:#21132e;gap:10px}.stats{display:flex;gap:24px;font-size:.9rem}.stats b{color:#ffd16a;font-variant-numeric:tabular-nums}.board{--cw:clamp(38px,9.9vw,110px);--ch:calc(var(--cw)*1.4);--step:clamp(22px,3.3vw,32px);max-width:940px;margin:auto;padding:24px 18px 20px;background:radial-gradient(ellipse,#422247 0%,#251232 75%);min-height:540px;user-select:none}.toprow,.tableau{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(5px,1vw,18px)}.toprow{margin-bottom:24px}.slot{position:relative;height:var(--ch);border:1px solid #a2769270;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#b991a7;font-size:2rem;min-width:0;background:#ffffff04}.slot>button.empty{position:absolute;inset:0;width:100%;height:100%;padding:0;background:transparent;color:#bd94a6;font-size:2rem;min-height:0}.pile{position:relative;min-height:var(--ch)}.card{position:absolute;left:0;width:100%;height:var(--ch);min-height:0;border-radius:7px;border:1px solid #e6ceac;background:linear-gradient(135deg,#fffdf4,#f7ecd7);color:#272039;padding:4px;box-shadow:0 3px 6px #10091d66;display:block;text-align:left;font:bold clamp(12px,2.4vw,21px)/1.05 Georgia,serif;cursor:pointer;transition:box-shadow .15s,filter .15s}.card.red{color:#b8204c}.card:hover{filter:brightness(1.04);z-index:3}.card .corner{display:block}.card .pip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(20px,4.2vw,46px)}.card .bottom{position:absolute;bottom:4px;right:5px;transform:rotate(180deg)}.card .court{position:absolute;inset:25% 18%;background:url('assets/klondike.webp') center/cover;border:1px solid #a98957;border-radius:30% 30% 10% 10%;opacity:.92}.card.back{background:repeating-linear-gradient(45deg,transparent 0 9px,#f4c77618 10px 11px),linear-gradient(135deg,#49297a,#251440);border:2px solid #bd985d;cursor:default}.card.back:after{content:'✦';position:absolute;inset:8%;border:1px solid #bc8d67;color:#efc77a;display:grid;place-items:center;font-size:2rem;border-radius:4px}.card.selected{outline:3px solid #55efff;outline-offset:-3px;box-shadow:0 0 18px #55efff88}.card.hinted{outline:3px solid #ffd16a;outline-offset:-3px}.gamecontrols{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:18px;background:#21132e;border-top:1px solid #73526c}.gamecontrols button{background:#342144;border-color:#a17b64;color:#fff4dd}.gamecontrols .primary{background:#ffd16a;color:#271432}.gamestatus{margin:0;text-align:center;min-height:38px;padding:5px 12px;background:#21132e;color:#e3cde6;font-size:.85rem}.tip{font-size:.85rem;color:var(--muted);margin-top:12px}.preview{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:450px;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}.preview img{width:100%;max-height:520px;object-fit:cover}.preview>div{padding:40px}.preview h2{font-size:2.6rem}.swatches{display:flex;gap:15px;flex-wrap:wrap}.swatch{width:150px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.swatch i{display:block;height:75px}.swatch span{display:block;padding:10px;font-size:.85rem}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:20px;padding:32px;width:min(94vw,440px);box-shadow:var(--shadow)}dialog::backdrop{background:#080512bb;backdrop-filter:blur(5px)}dialog label{display:block;margin:18px 0}dialog select{margin-left:10px;padding:8px}.dialogactions{display:flex;gap:12px;flex-wrap:wrap}dialog h2{font-size:2rem}.win-stars{font-size:3rem;color:var(--gold);text-align:center}.settingsline{display:flex;gap:15px;align-items:center}input[type=checkbox]{width:20px;height:20px}.brief{break-after:page}.brief img{width:160px;float:right;margin:0 0 15px 25px;border-radius:18px}.brief h1{font-size:2.5rem}.brief h2{font-size:1.2rem;margin:20px 0 8px}.brief table{width:100%;border-collapse:collapse}.brief td{padding:8px;border-bottom:1px solid var(--line)}[hidden]{display:none!important}@media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-copy{width:70%}.hero{min-height:440px}.navlinks{gap:15px}.navlinks a:nth-child(2){display:none}}@media(max-width:650px){.wrap{width:94%}.nav{min-height:72px;gap:10px}.brand{font-size:1.45rem}.brand small{font-size:8px}.navlinks{gap:8px}.navlinks a{display:none}.navlinks button{font-size:.8rem;padding:8px 10px}.hero{min-height:490px;margin:16px auto}.hero-art{object-position:65% center}.hero:after{background:linear-gradient(0deg,#150a29 0%,#170b28dd 30%,#170b2822 85%)}.hero-copy{width:100%;padding:25px;align-self:end}.hero h1{font-size:2.9rem}.hero p{font-size:1rem;max-width:280px}.hero-meta{font-size:.75rem;margin-top:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile-body{padding:12px}.tile h3{font-size:1.1rem}.daily{grid-template-columns:1fr}.feature>div{padding:18px}.editorial{grid-template-columns:1fr;gap:20px}.section{margin:30px auto}.gameheading h1{font-size:1.9rem}.gameheading{align-items:start}.gameheading .tag{display:none}.game-scenery{height:52px}.gamebar{padding:10px 12px;font-size:.8rem}.stats{gap:12px;font-size:.8rem}.board{padding:16px 8px;min-height:460px}.toprow{margin-bottom:20px}.gamecontrols{gap:6px;padding:12px 8px}.gamecontrols button{padding:8px 10px;font-size:.8rem}.preview{grid-template-columns:1fr}.preview img{max-height:320px}.preview>div{padding:25px}.panel{padding:22px}.sectionhead{align-items:start}.sectionhead .muted{font-size:.8rem}.brief img{width:110px}.gameheading p{font-size:.85rem}}@media(max-height:500px) and (orientation:landscape){.game-scenery{display:none}.board{--cw:72px;--ch:100px;--step:22px;max-width:730px;min-height:360px}.gameheading{margin:10px auto}.gameheading h1{font-size:1.5rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{header,footer,.no-print{display:none}.brief{min-height:95vh;padding:20px}.wrap{width:100%}body{background:white;color:#22132d}.panel{border:0;background:white}.eyebrow,.muted{color:#604466}}

@keyframes card-arrive{from{transform:translateY(-7px) scale(.96);opacity:.7}to{transform:none;opacity:1}}.card.arriving{animation:card-arrive .2s ease-out}@keyframes win-reveal{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}#win[open] .win-stars{animation:win-reveal .5s ease-out}

/* Revision 2: readable overlapping cards and a viewport-sized playing surface. */
.card{appearance:none;-webkit-appearance:none;overflow:hidden}
.card .corner{position:absolute;top:3px;left:3px;z-index:4;display:block;font-size:var(--rank-size,18px);font-weight:800;line-height:1;white-space:nowrap;pointer-events:none}
.card .court{top:max(26px,26%);bottom:24%;z-index:1;pointer-events:none}
.card .pip,.card .bottom{z-index:1;pointer-events:none}
.card:hover{z-index:auto}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 16px}
.hero-meta span{white-space:nowrap}
.hero-meta span:not(:last-child)::after{content:' ·';margin-left:16px}
.play-page .nav{min-height:60px}
.play-page .brand{font-size:1.6rem}
.play-page .brand small{display:none}
.play-page .crumb{margin:6px auto;font-size:.8rem}
.play-page .gameheading{margin:6px auto 10px;min-height:44px}
.play-page .gameheading h1{font-size:1.9rem;margin:0}
.play-page .gameheading .eyebrow{font-size:.7rem;letter-spacing:.12em;margin-bottom:3px}
.play-page .gameheading p{display:none}
.play-page .game-scenery{display:none}
.play-page .game-shell{height:calc(100svh - 160px);display:flex;flex-direction:column;min-height:0}
.play-page .gamebar{padding:6px 16px;flex:0 0 auto}
.play-page .gamebar button{min-height:36px;padding:4px 12px}
.play-page .board{width:100%;max-width:960px;flex:1 1 0;min-height:0;margin:0 auto;padding:12px 14px;--ch:110px;--rank-size:20px}
.play-page .toprow,.play-page .tableau{grid-template-columns:repeat(7,var(--card-width,1fr));justify-content:center;gap:var(--pile-gap,10px)}
.play-page .toprow{margin-bottom:var(--row-gap,16px)}
.play-page .gamecontrols{flex:0 0 auto;padding:8px 12px;gap:8px}
.play-page .gamestatus{flex:0 0 auto;height:44px;min-height:44px;overflow:auto;display:flex;align-items:center;justify-content:center;line-height:1.3;font-size:.85rem;padding:4px 12px}
.play-page .tip{margin-top:10px}
@media(max-width:650px){
 .play-page .nav{min-height:54px}.play-page .brand{font-size:1.3rem}
 .play-page .crumb{display:none}.play-page .gameheading{margin:7px auto;min-height:42px}
 .play-page .gameheading h1{font-size:1.6rem}
 .play-page .game-shell{height:calc(100svh - 120px);border-radius:14px}
 .play-page .board{padding:10px 7px;--rank-size:16px}
 .play-page .gamebar{padding:5px 10px}.play-page .gamecontrols{gap:5px;padding:7px 8px}
 .play-page .gamecontrols button{font-size:.8rem;padding:6px 9px;min-height:40px}
 .play-page .gamestatus{height:44px;min-height:44px;font-size:.8rem}
 .play-page .card .corner{left:2px;top:3px}
}
@media(max-height:500px) and (orientation:landscape){
 .play-page .nav{min-height:44px}.play-page .nav button{min-height:34px;padding:4px 10px}
 .play-page .crumb,.play-page .gameheading .eyebrow{display:none}
 .play-page .gameheading{min-height:28px;margin:4px auto}.play-page .gameheading h1{font-size:1.3rem}
 .play-page .gamebar{padding:3px 12px}.play-page .gamebar button{min-height:28px}
 .play-page .gamecontrols{padding:4px 8px}.play-page .gamecontrols button{min-height:32px;padding:4px 10px}
 .play-page .gamestatus{height:30px;min-height:30px;font-size:.75rem}
 .play-page .board{padding:6px 10px}
}
/* Keep all artwork/pips inside each card's own paint layer. Later cards cover it. */
.card{isolation:isolate}

/* Extremely short windows keep any overflow within the game, never over controls. */
.play-page .board{overflow:auto;overscroll-behavior:contain}
/* Rummy destinations: the same ivory cards, anchored rank labels, and carnival palette. */
.rummy-surface{border:1px solid #987153;border-radius:18px;background:radial-gradient(ellipse at 90% 0%,#513058,#251232 65%);color:#fff4dd;overflow:hidden;padding:16px 24px;max-width:1100px;margin:auto;box-shadow:var(--shadow)}
.rummy-title{display:flex;align-items:center;gap:16px}.rummy-title img{width:64px;height:64px;object-fit:cover;border-radius:16px;border:1px solid var(--gold)}
.rummy-title h1{font-size:2rem!important}.opponents{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.opponent{background:#1e102e;border:1px solid #755372;border-radius:12px;padding:8px 12px;font-size:.85rem}.opponent.current{border-color:#ffd16a;color:#ffd16a}
.draw-area{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0}.draw-area .card{position:relative;width:65px;height:90px;flex:none;min-height:0}.draw-area .stockgroup{text-align:center;font-size:.75rem}.draw-area p{max-width:300px;font-size:.9rem;margin:4px 0}.hand{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:8px;max-width:980px;margin:12px auto}
.hand .handcard{position:relative;top:0!important;height:112px;min-height:0;width:100%;touch-action:pan-y;--rank-size:19px}.handcard.melded{box-shadow:inset 0 -5px #b4883f}.handcard.selected{outline-offset:1px;outline-width:3px}.rummy-toolbar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:10px 0}.rummy-toolbar button{min-height:38px;padding:6px 12px;font-size:.85rem}.rummy-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}.rummy-actions button{min-height:42px;font-size:.9rem}.rummy-summary{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:bold;color:#ffd16a}.rummy-status{min-height:36px;text-align:center;font-size:.85rem;margin:8px 0 0;color:#ead7ef}.public-melds{display:flex;gap:8px;overflow:auto;max-height:80px}.meld-chip{min-width:160px;font-size:.75rem;padding:8px}.online-info{max-width:1100px;margin:12px auto;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.linkrow{display:flex;gap:8px;flex-wrap:wrap}.linkrow input{flex:1;min-width:170px;padding:10px;border-radius:10px;background:var(--bg);color:var(--text);border:1px solid var(--line)}.reactions{display:flex;gap:10px;flex-wrap:wrap;font-size:.85rem}.waiting{padding:24px;text-align:center}.resultcard{padding:16px;background:#3a224d;border:1px solid #ffd16a;border-radius:12px;margin:10px 0}.rummy-surface button:disabled{opacity:.5}.rummy-surface button:not(.card){color:#fff4dd;background:#342144;border-color:#8e6c82}.rummy-surface button.primary{color:#291735;background:#ffd16a}.rummy-page .gameheading{align-items:center}.rummy-page .gameheading>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.rummy-page dialog input[type=text]{width:100%;padding:12px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px}
@media(max-width:800px){.hand{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.hand .handcard{height:84px;--rank-size:16px}.rummy-surface{padding:12px}.rummy-title img{width:46px;height:46px}.rummy-title h1{font-size:1.45rem!important}.rummy-page .gameheading{align-items:start}.rummy-page .gameheading button{font-size:.75rem;padding:6px 8px;min-height:36px}.rummy-page .gameheading>div:last-child{justify-content:end;max-width:110px}.opponent{font-size:.75rem;padding:6px 8px}.rummy-toolbar button{padding:6px 9px;font-size:.75rem}.rummy-actions{gap:6px}.rummy-actions button{font-size:.8rem;padding:7px 10px}.draw-area{gap:10px;margin:8px 0}.draw-area .card{width:52px;height:72px}.draw-area p{font-size:.8rem}.rummy-summary{font-size:.85rem}.rummy-title .eyebrow{font-size:.6rem}.rummy-page .nav{min-height:54px}.rummy-page .brand{font-size:1.3rem}.rummy-page .brand small{display:none}.rummy-page .gameheading{margin:10px auto}.rummy-toolbar{margin:8px 0}.hand .pip{font-size:27px}}
/* Illustrated destinations sit behind a calm, opaque playing surface. */
.rummy-surface{background-image:linear-gradient(90deg,#251232ed,#251232d9 55%,#251232e8),var(--destination);background-size:cover;background-position:center;box-shadow:inset 0 0 65px #e7a44b0d,var(--shadow)}
body[data-game=gin]{--destination:url('assets/gin-rummy.webp')}
body[data-game=whiskertrail]{--destination:url('assets/whiskertrail-rummy.webp')}
.rummy-surface .hand{padding:12px 0;border-top:1px solid #ffcf682b;border-bottom:1px solid #ffcf682b}
.rummy-surface .card .court{inset:30% 20% 12%;background-image:var(--destination)}
#challenge-panel{margin-top:20px}#challenge-link{width:100%;padding:12px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;margin-bottom:12px}#challenge-name{max-width:100%;padding:10px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px}
@media(prefers-reduced-motion:no-preference){.handcard.arriving{animation:hand-in .18s ease-out}@keyframes hand-in{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}}
#invite-details summary{cursor:pointer;color:var(--gold);font-size:.85rem;min-height:32px;padding:4px 0}#invite-details p{margin-top:10px}.online-info.playing{padding:8px 14px}.online-info.playing .sectionhead{margin-bottom:2px;font-size:.85rem}.online-info.playing #connection{font-size:.75rem}.online-info.playing .reactions:empty{display:none}
.hand .handcard{touch-action:none}