/* Shared look of the newer games on this site. */
:root { --bg:#0f172a; --panel:#1e293b; --line:#334155; --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; --ok:#4ade80; --bad:#f87171; color-scheme:dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:720px; margin:0 auto; padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.home { align-self:flex-start; color:var(--accent); text-decoration:none; }
h1 { margin:0; font-size:1.5rem; }
button { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 14px; cursor:pointer; }
button:hover:not(:disabled), button.on { border-color:var(--accent); }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); color:#06202e; font-weight:700; border:0; padding:9px 22px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.bar, .hud { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; }
.hud { color:var(--muted); } .hud b { color:var(--text); }
.msg { min-height:1.5em; margin:0; font-weight:700; text-align:center; } .msg.win { color:var(--ok); } .msg.lose { color:var(--bad); }
.help { margin:0; color:var(--muted); font-size:.85rem; text-align:center; max-width:560px; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }
/* playing cards */
.pcard { width:var(--cw, 84px); aspect-ratio:5/7; background:#fffaf0; color:#1a1a1a; border-radius:10px; border:1px solid #cbbf9f; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; box-shadow:0 3px 8px rgba(0,0,0,.4); user-select:none; }
.pcard .r { font-size:calc(var(--cw, 84px) * .4); line-height:1; } .pcard .s { font-size:calc(var(--cw, 84px) * .36); line-height:1; } .pcard.red { color:#c81e3a; }
.pcard.down { background:repeating-linear-gradient(45deg,#1e40af 0 6px,#1e3a8a 6px 12px); border-color:#172554; }
.felt { background:radial-gradient(ellipse at 50% 20%, #1f7a4c, #0e4a2c); border:3px solid #0a3322; border-radius:18px; padding:12px; width:min(720px, 98vw); }
.felt .pcard { cursor:pointer; } .pcard.sel { outline:3px solid #fbbf24; transform:translateY(-6px); } .pcard.ok { box-shadow:0 0 0 3px #4ade80, 0 3px 8px rgba(0,0,0,.4); } .pcard.empty { background:rgba(255,255,255,.08); border:2px dashed rgba(255,255,255,.35); box-shadow:none; }

/* Table and card details shared by the solitaire games. */
.felt { border:7px solid #754a2b; background:radial-gradient(ellipse at 48% 18%,#258761 0%,#176d4d 48%,#0d4937 100%); box-shadow:inset 0 0 0 2px rgba(255,226,168,.24),inset 0 0 32px rgba(0,31,20,.32),0 15px 28px rgba(25,50,36,.2); }
.pcard { position:relative; border:1px solid #d9c9a5; background:linear-gradient(145deg,#fffdfa,#f2ead8); box-shadow:inset 0 1px 0 #fff,0 3px 7px rgba(15,39,29,.3); text-shadow:0 1px 0 rgba(255,255,255,.5); }
.pcard[data-corner]::before,.pcard[data-corner]::after { content:attr(data-corner); position:absolute; font:800 calc(var(--cw,84px) * .15)/1 system-ui,sans-serif; letter-spacing:-.07em; }
.pcard[data-corner]::before { top:5%; left:6%; }
.pcard[data-corner]::after { bottom:5%; right:6%; transform:rotate(180deg); }
.pcard.down { background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.12) 5px 8px),linear-gradient(135deg,#357cc1,#123968); border:3px solid #e5d8b7; box-shadow:inset 0 0 0 2px #255996,0 3px 7px rgba(5,26,44,.35); }
@media (max-width:640px) { .felt { border-width:5px; padding:8px; } .pcard[data-corner]::before,.pcard[data-corner]::after { font-size:calc(var(--cw,84px) * .14); } }