:root{color-scheme:dark;--gold:#f0cc88;--muted:#d9b8b4;--line:#79543e;--cream:#fff0d7}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 28%,#641a2a 0,#310c17 49%,#16070d 100%);color:var(--cream);font:16px/1.55 system-ui,sans-serif}button{font:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);border-radius:8px;background:#38131e;padding:.65rem 1rem;min-height:44px;touch-action:manipulation}button:hover:not(:disabled){border-color:var(--gold);filter:brightness(1.13)}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid white;outline-offset:3px}header,footer{display:flex;align-items:center;justify-content:space-between;padding:12px clamp(16px,5vw,76px);color:var(--gold);letter-spacing:.18em;font-size:.7rem}header{border-bottom:1px solid #ffffff19}header button{background:none;border:0;padding:0;font:700 1rem Georgia,serif;letter-spacing:.16em}footer{justify-content:center;gap:14px;margin-top:32px}main{width:min(980px,calc(100% - 28px));margin:28px auto 0}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,serif;font-weight:normal}h1{font-size:clamp(2.1rem,8vw,5.4rem);letter-spacing:.09em;line-height:1.1;color:var(--gold)}h2{font-size:clamp(1.45rem,4vw,2rem)}p{color:var(--muted)}.hero{text-align:center;padding:30px 0 26px}.eyebrow{color:var(--gold);letter-spacing:.22em;font-size:.71rem;font-weight:700}.hero p{margin:10px 0}.crest{font-size:3rem;color:var(--gold);line-height:1.15}.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.choice{position:relative;overflow:hidden;text-align:left;padding:24px;background:linear-gradient(145deg,#541829,#230c15);border-radius:16px;min-height:218px;display:grid;gap:8px}.choice.dos{background:linear-gradient(145deg,#353324,#1e1015)}.choice h2,.choice p,.choice strong,.choice small{position:relative}.choice .watermark{position:absolute;right:8px;top:-56px;font:180px Georgia;color:#f4cd8420;pointer-events:none}.choice strong{color:var(--gold);margin-top:8px}.bar,.actions,.seats,.cards{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bar{justify-content:space-between;margin-bottom:12px}.bar p{font-size:.85rem}.felt{border:1px solid var(--line);border-radius:19px;padding:clamp(10px,3vw,25px);background:radial-gradient(ellipse at center,#68273a,#300e19);box-shadow:inset 0 0 28px #10040b99,0 10px 30px #10040b60}.seats{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:12px}.seat{background:#210b14;border:1px solid #ffffff20;border-radius:8px;padding:7px;text-align:center;font-size:.8rem}.seat.active{border-color:var(--gold);background:#572333}.seat span{display:block;color:var(--muted);font-size:.7rem}.pile{display:grid;align-content:center;justify-items:center;gap:5px;min-height:126px;border:1px dashed #f0cc8860;border-radius:12px;text-align:center;margin-bottom:12px}.cards{gap:5px}.pile .cards{justify-content:center}.card{background:linear-gradient(#fff9ec,#e9d7bc);color:#20151b;border:1px solid #e2c497;border-radius:6px;min-width:43px;height:59px;padding:4px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font:700 1.05rem/1 Georgia,serif;box-shadow:0 3px 4px #15050c70}.card.red{color:#a21d32}.card[aria-pressed=true]{background:#ffe0a0;outline:2px solid #ffdf99;transform:translateY(-4px)}.card:disabled{opacity:1}.tray{margin:12px 0}.tray .eyebrow{margin-bottom:8px}.actions{margin-top:12px}.primary{background:var(--gold);color:#2f1019;font-weight:750}.lanes{display:grid;gap:6px}.lane{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px;border:1px solid #ffffff29;border-radius:8px;background:#20091170}.lane>button{min-width:105px;text-align:left}.notice{min-height:2.8em;color:var(--cream);margin:8px 0}.result{margin-top:14px;padding:12px;background:#210b14;border-radius:8px;overflow:auto}table{border-collapse:collapse;width:100%;font-size:.8rem}td,th{text-align:left;padding:6px;border-bottom:1px solid #ffffff24}dialog{width:min(540px,calc(100% - 24px));max-height:85vh;background:#32101d;color:var(--cream);border:1px solid var(--gold);border-radius:15px;padding:22px}dialog::backdrop{background:#13060acc}dialog p{margin-top:10px}.close{float:right}details{margin-top:8px}summary{cursor:pointer;color:var(--gold)}@media(max-width:560px){main{margin-top:12px}.hero{padding:15px 0}.choices{grid-template-columns:1fr;gap:10px}.choice{min-height:147px;padding:15px;gap:4px}.crest{font-size:2.25rem}.card{min-width:40px;height:49px}.actions button{flex:1 0 auto}.seat{padding:5px 1px}.lane>button{min-width:90px;padding:5px}.bar{gap:3px}}

/* Layered table and card faces with flat, full-size hit areas. */
body{
  background:repeating-linear-gradient(115deg,#ffffff02 0 1px,transparent 1px 4px),
    radial-gradient(ellipse at 50% 16%,#641b30 0,#300d1a 46%,#15070e 100%);
}
header{background:#190911b8}
.hero{padding-block:30px 32px}
.crest{display:flex;justify-content:center;align-items:center;height:86px;margin:0 auto 18px;perspective:450px}
.crest i{
  display:grid;place-items:center;width:44px;height:64px;margin-inline:-5px;
  border:1px solid #deb474;border-radius:7px;color:#ffdc98;font:normal 29px Georgia,serif;
  background:linear-gradient(150deg,#733547,#270f1d 70%);box-shadow:0 7px 15px #0a020999,inset 0 0 0 3px #fff1cb14;
  transform:rotateY(-14deg) rotateZ(-18deg) translateY(6px);
}
.crest i:nth-child(2){z-index:1;transform:translateZ(22px);background:linear-gradient(155deg,#f5d597,#ac7740);color:#461925}
.crest i:nth-child(3){transform:rotateY(14deg) rotateZ(18deg) translateY(6px)}
.choice{box-shadow:0 10px 25px #10030b6b,inset 0 0 0 3px #ffd69a0a;transition:transform .18s ease,box-shadow .18s ease}
.choice.dos{background:linear-gradient(145deg,#452b26,#230c15)}
@media(hover:hover){.choice:hover{transform:translateY(-3px);box-shadow:0 14px 26px #10030ba0}}
.bar .actions{margin-top:0}
.felt{
  background:repeating-linear-gradient(45deg,#ffffff04 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at center,#622338,#340e21 78%);
  border:1px solid #aa774e;
  box-shadow:inset 0 0 0 4px #240a14,inset 0 0 0 5px #f3c48540,0 8px 0 -3px #18070f,0 17px 32px #10040b85;
  padding:clamp(14px,3vw,25px);
}
.pile{background:#19060e3b;box-shadow:inset 0 4px 13px #18060d70}
.cards{perspective:600px}
.card{
  width:48px;min-width:44px;min-height:48px;height:65px;position:relative;
  background:linear-gradient(155deg,#fffdf4,#f6e7cf 75%,#e3caa9);
  border:1px solid #edd2ab;box-shadow:0 3px 0 #a6815d,0 5px 6px #16050d90;
  transition:transform .14s ease,box-shadow .14s ease;
}
.corner{position:absolute;left:4px;top:4px;font-size:.77rem}
.pip{font-size:1.55rem;margin-top:8px}
.card[aria-pressed=true]{transform:translateY(-4px) rotateX(7deg);box-shadow:0 5px 0 #b2834e,0 9px 9px #16050d90}
@media(hover:hover){button.card[aria-pressed=false]:hover{transform:translateY(-2px)}}
@media(max-width:560px){
  .hero{padding-block:12px 16px}.crest{height:62px;margin-bottom:12px}
  .crest i{width:34px;height:48px;font-size:22px}
  .card{width:44px;height:54px}.felt{padding:12px}.actions{gap:6px}
  .actions button{padding-inline:9px}.notice{min-height:2.5em;font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* jpam.studio */
header .studio{color:inherit;text-decoration:none}header .studio:hover{color:#fff0d7}
footer{flex-direction:column;gap:10px}
.sitefoot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;letter-spacing:.04em;font-size:.78rem;color:var(--muted);margin:0 0 6px}
.sitefoot a{color:var(--gold);text-decoration:none}.sitefoot a:hover{text-decoration:underline}