:root{
  --felt:#1d4436; --felt-dark:#153328; --walnut:#241a10; --walnut-dark:#1a120a;
  --brass:#c8a24d; --brass-bright:#e6c675; --brass-dark:#8a6d2f;
  --cream:#f1e6cc; --cream-dark:#e2d2ae; --ink:#262019;
  --miss:#a5352a; --good:#3e7d4f; --good-bright:#5aa972;
  --shadow:0 8px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(200,162,77,.10), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, var(--walnut), var(--walnut-dark));
  color:var(--cream);
  font-family:'Fraunces', Georgia, serif;
  min-height:100%;
  padding:10px 14px 24px;
}
.util{font-family:'Oswald', 'Arial Narrow', sans-serif; letter-spacing:.12em; text-transform:uppercase}

/* ---------- Header ---------- */
header{max-width:1180px;margin:0 auto 10px;text-align:center}
.marquee{
  display:inline-block; padding:6px 26px 8px; position:relative;
  background:linear-gradient(180deg,#2b5a47,var(--felt) 60%,var(--felt-dark));
  border:3px solid var(--brass); border-radius:10px; box-shadow:var(--shadow), inset 0 0 0 2px rgba(0,0,0,.35);
}
.marquee::before,.marquee::after{
  content:"◆"; color:var(--brass); position:absolute; top:50%; transform:translateY(-52%); font-size:.9rem;
}
.marquee::before{left:12px}.marquee::after{right:12px}
h1{
  font-weight:900; font-size:clamp(1.4rem, 3.4vw, 2.1rem); line-height:1.05;
  color:var(--brass-bright); text-shadow:0 2px 0 rgba(0,0,0,.5);
  letter-spacing:.02em;
}
h1 em{font-style:italic; color:var(--cream)}
.tagline{font-size:.78rem;color:var(--cream-dark);margin-top:2px}
.modebadge{
  display:inline-block; margin-top:5px; font-size:.66rem; padding:2px 12px; border-radius:99px;
  border:1.5px solid var(--brass-dark); color:var(--brass-bright); background:rgba(0,0,0,.3);
}

/* ---------- Scoreboard ---------- */
.scoreboard{
  max-width:1180px;margin:0 auto 10px;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.stat{
  background:linear-gradient(180deg,#31251733,#00000055), var(--walnut);
  border:2px solid var(--brass-dark); border-radius:8px;
  min-width:98px; padding:4px 10px 6px; text-align:center; box-shadow:var(--shadow);
}
.stat .label{font-size:.6rem;color:var(--brass);}
.stat .value{font-size:1.2rem;font-weight:600;color:var(--cream);font-family:'Oswald',sans-serif;letter-spacing:.05em}
.stat .value.warn{color:#e7b64c}
.stat .value.bad{color:#e06a5d}

/* ---------- Layout ---------- */
.table{ max-width:780px; margin:0 auto; display:block }
body.view-card .gallery{display:none}
body.view-board .dealer{display:none}
.dealer,.gallery{animation:stageIn .32s ease}
@keyframes stageIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ---------- Left: shoe + card ---------- */
.dealer{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,#256049 0%, var(--felt) 40%, var(--felt-dark));
  border:3px solid var(--brass-dark); border-radius:14px; box-shadow:var(--shadow), inset 0 2px 12px rgba(0,0,0,.4);
  padding:12px 14px 16px; display:flex; flex-direction:column; align-items:center; gap:10px;
  overflow:hidden;
}
.shoe-row{display:flex; gap:18px; width:100%; align-items:flex-end; justify-content:center}

/* The brass cylinder shoe */
.shoe{width:100px; text-align:center; flex-shrink:0}
.cyl{
  position:relative; width:88px; height:200px; margin:0 auto;
  border-radius:52px 52px 14px 14px;
  background:linear-gradient(90deg,#5d4a22, var(--brass) 30%, #f0d896 50%, var(--brass) 70%, #5d4a22);
  border:2px solid var(--brass-dark);
  box-shadow:var(--shadow), inset 0 6px 8px rgba(255,255,255,.25);
}
.cyl.shimmer{animation:shimmer .5s ease}
@keyframes shimmer{
  0%,100%{filter:brightness(1)} 40%{filter:brightness(1.35)}
}
.cyl .glass{
  position:absolute; left:14px; right:14px; top:26px; bottom:34px;
  background:linear-gradient(180deg, rgba(20,30,26,.85), rgba(10,16,13,.9));
  border-radius:8px; border:2px solid var(--brass-dark);
  overflow:hidden;
}
.cyl .stack{
  position:absolute; left:4px; right:4px; bottom:0;
  background:repeating-linear-gradient(180deg, var(--cream) 0 3px, var(--cream-dark) 3px 4px, #b7a684 4px 5px);
  border-top:2px solid var(--brass);
  transition:height .5s ease;
}
.cyl .slot{
  position:absolute; left:16px; right:16px; bottom:12px; height:11px;
  background:#0c0f0d; border-radius:4px; border:1.5px solid var(--brass-dark);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9);
}
.cyl .finial{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f4e0a8, var(--brass) 60%, var(--brass-dark));
  border:1.5px solid var(--brass-dark);
}
.shoe .count{margin-top:8px; font-size:.72rem; color:var(--brass)}
.shoe .count b{display:block; font-size:1.5rem; color:var(--cream); font-family:'Oswald',sans-serif; font-weight:600}

/* Flying dealt card */
.flyer{
  position:absolute; width:70px; height:96px; border-radius:8px; z-index:20;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(200,162,77,.18) 7px 8px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(200,162,77,.18) 7px 8px),
    radial-gradient(circle at 50% 50%, #2b5a47, var(--felt-dark) 78%);
  border:2px solid var(--brass-dark);
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  color:var(--brass); font-size:1.2rem;
  transition:left .55s cubic-bezier(.3,.7,.4,1), top .55s cubic-bezier(.3,.7,.4,1), transform .55s ease;
  pointer-events:none;
}

/* The drawn card */
.card-zone{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px}
.cardflip{ perspective:900px; width:100% }
.playcard{
  width:100%; min-height:258px; border-radius:12px;
  background:linear-gradient(160deg,#fbf3de, var(--cream) 55%, var(--cream-dark));
  color:var(--ink); border:2px solid var(--brass-dark);
  box-shadow:var(--shadow);
  padding:10px 12px 12px; position:relative;
  display:flex; flex-direction:column; gap:8px;
  transform-style:preserve-3d;
  transition:transform .45s ease;
}
.cardflip.flipping .playcard{animation:flipIn .5s ease}
@keyframes flipIn{
  0%{transform:rotateY(90deg)} 100%{transform:rotateY(0deg)}
}
.playcard.facedown{
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(200,162,77,.16) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(200,162,77,.16) 9px 10px),
    radial-gradient(circle at 50% 50%, #2b5a47, var(--felt-dark) 75%);
  color:var(--brass);
  align-items:center; justify-content:center; text-align:center;
}
.playcard.facedown .backmark{font-size:2.2rem; line-height:1}
.playcard.facedown .backword{font-size:.72rem; letter-spacing:.2em; margin-top:6px; color:var(--brass-bright)}
.playcard .cat{
  align-self:center; font-size:.66rem; padding:3px 12px; border-radius:99px;
  border:1.5px solid var(--brass-dark); color:#7a5c1e; background:rgba(200,162,77,.15);
}
.artslot{
  height:126px; border-radius:8px; border:1.5px solid #b09a63;
  background:linear-gradient(180deg,#efe2c2,#e6d5ae);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.artslot img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.artslot svg{height:80%; opacity:.5}
.artslot .artnote{position:absolute; bottom:3px; right:7px; font-size:.56rem; color:#9c8547; background:rgba(239,226,194,.8); padding:0 4px; border-radius:3px}
.clues{list-style:none; display:flex; flex-direction:column; gap:5px; min-height:52px}
/* wide card: big photo left, clues right */
.cardbody{display:flex; gap:12px; align-items:stretch; flex:1; min-height:0}
.cardbody .artslot{flex:1.3; height:auto; min-height:190px}
.cardbody .clues{flex:1; min-height:0; padding-top:2px}
@media (max-width:620px){
  .cardbody{flex-direction:column}
  .cardbody .artslot{min-height:142px}
}

.clues li{
  font-size:.85rem; line-height:1.25; padding-left:16px; position:relative; min-height:1.1em;
  color:#3a3125;
}
.clues li::before{content:"◆"; position:absolute; left:0; top:1px; font-size:.6rem; color:#c9b98f; transition:color .3s}
.clues li.on::before{color:var(--brass-dark)}
.clues li .caret{display:inline-block; width:2px; background:#7a5c1e; animation:blink .7s steps(1) infinite; margin-left:1px}
@keyframes blink{50%{opacity:0}}
.cardtime{
  position:absolute; top:8px; right:10px; font-family:'Oswald',sans-serif;
  font-size:.85rem; color:#7a5c1e; letter-spacing:.06em;
}

/* Piece-reveal face of card */
.piecereveal{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; justify-content:center}
.piecereveal .pn{font-size:.72rem; color:#7a5c1e}
.piecereveal .pnum{font-family:'Oswald',sans-serif; font-size:1.8rem; font-weight:600; color:var(--felt); line-height:1}
.minipiece{display:flex; align-items:center; justify-content:center}
/* MISS stamp */
.stamp{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.stamp span{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:3rem; letter-spacing:.14em;
  color:var(--miss); border:5px solid var(--miss); border-radius:10px; padding:2px 20px;
  transform:rotate(-14deg); opacity:0; background:rgba(241,230,204,.85);
}
.stamp.show span{animation:stampIn .35s ease-out forwards}
@keyframes stampIn{
  0%{opacity:0; transform:rotate(-14deg) scale(2.4)}
  100%{opacity:1; transform:rotate(-14deg) scale(1)}
}

/* Controls */
.controls{width:100%; max-width:360px; display:flex; flex-direction:column; gap:10px; align-items:center}
#answer{
  width:100%; font-family:'Fraunces',serif; font-size:1.1rem; padding:10px 14px;
  border-radius:8px; border:2px solid var(--brass-dark); background:var(--cream); color:var(--ink);
}
#answer:focus{outline:3px solid var(--brass); outline-offset:1px}
#answer:disabled{opacity:.45}
.choices{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.choices button{
  font-family:'Fraunces',serif; font-size:.95rem; font-weight:600; line-height:1.15;
  padding:9px 6px; border-radius:9px; cursor:pointer;
  border:2px solid var(--brass-dark); background:var(--cream); color:var(--ink);
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  transition:transform .07s ease, filter .15s;
}
.choices button:hover{filter:brightness(1.05)}
.choices button:active{transform:translateY(2px)}
.choices button:focus-visible{outline:3px solid var(--brass); outline-offset:2px}
.choices button:disabled{opacity:.5; cursor:default}
.choices button.picked-right{background:var(--good-bright); border-color:var(--good); color:#fff}
.choices button.picked-wrong{background:#e2a49d; border-color:var(--miss); color:#5c1b13}
.btn{
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  border-radius:10px; border:2px solid var(--brass-dark); cursor:pointer;
  padding:10px 26px; font-size:.95rem; color:var(--walnut-dark);
  background:linear-gradient(180deg, var(--brass-bright), var(--brass) 55%, var(--brass-dark));
  box-shadow:var(--shadow), inset 0 2px 0 rgba(255,255,255,.4);
  transition:transform .08s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:3px solid var(--cream); outline-offset:2px}
.btn:disabled{opacity:.4; cursor:default; transform:none}
.msg{min-height:1.4em; font-size:.95rem; text-align:center; color:var(--cream-dark)}
.msg.good{color:var(--good-bright); font-weight:600}
.msg.bad{color:#e06a5d; font-weight:600}
.soundbtn{cursor:pointer; font-family:inherit}
.soundbtn:focus-visible{outline:3px solid var(--brass); outline-offset:2px}
.solvebar{display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap}
.solvebar input{
  flex:1; min-width:180px; font-family:'Fraunces',serif; font-size:.95rem; padding:8px 12px;
  border-radius:8px; border:2px solid var(--brass-dark); background:var(--cream); color:var(--ink);
}
.solvebar input:focus{outline:3px solid var(--brass); outline-offset:1px}
.solvebar .btn{padding:10px 22px; font-size:.95rem}
.solvemsg{width:100%; min-height:1.3em; text-align:center; font-size:.95rem; color:#e7b64c; font-weight:600}


/* ---------- Right: the framed puzzle board ---------- */
.gallery{
  background:linear-gradient(160deg,#3a2c18,#241a10 70%);
  border-radius:14px; padding:14px; box-shadow:var(--shadow);
  border:2px solid #000;
}
.gallery .plaque{
  width:max-content; margin:0 auto 10px; padding:3px 18px;
  background:linear-gradient(180deg,var(--brass-bright),var(--brass) 60%,var(--brass-dark));
  color:var(--walnut-dark); border-radius:6px; border:1.5px solid var(--brass-dark);
  font-size:.75rem; font-weight:600; box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.frame{
  position:relative; border-radius:6px;
  margin:0 auto;
  max-width:min(100%, calc((100vh - 320px) * 1.6));
  border:10px solid transparent;
  border-image:linear-gradient(135deg,#e9cf8b,#8a6d2f 30%,#e9cf8b 50%,#6b5325 75%,#d9bd76) 1;
  box-shadow:var(--shadow), inset 0 0 24px rgba(0,0,0,.6);
  background:#0d0b07;
}
.board{position:relative; width:100%; aspect-ratio:8/5; overflow:hidden;}
.board .scene{position:absolute; inset:0; width:100%; height:100%}
.board .jigsaw{position:absolute; inset:0; pointer-events:none}
.grid{ position:absolute; inset:0; }
.grid svg{ width:100%; height:100%; display:block }
.tile{position:relative; perspective:600px;}
.tile .cover{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(200,162,77,.13) 7px 8px),
    radial-gradient(circle at 50% 46%, #2b5a47, var(--felt-dark) 80%);
  border:1px solid rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  color:var(--brass); font-family:'Oswald',sans-serif; font-weight:500;
  font-size:clamp(.7rem, 1.6vw, 1.05rem);
  backface-visibility:hidden;
  transition:transform .6s ease, opacity .6s ease;
}
.tile.open .cover{transform:rotateY(180deg); opacity:0; pointer-events:none}
.tile.justopened .glow{
  position:absolute; inset:0; border:2px solid var(--brass-bright);
  animation:fadeGlow 1.6s ease-out forwards; pointer-events:none;
}
@keyframes fadeGlow{from{opacity:1}to{opacity:0}}
/* jigsaw board pieces */
.pcover{transition:opacity .55s ease}
.pcover.open{opacity:0; pointer-events:none}
.pcover text{font-family:'Oswald',sans-serif; fill:var(--brass); font-size:26px; font-weight:500}
.pflash{animation:fadeGlow 1.6s ease-out forwards; pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .tile .cover{transition:none}
  .stamp.show span{animation:none; opacity:1}
  .cyl .stack{transition:none}
  .flyer{transition:none}
  .dealer,.gallery{animation:none}
  .cardflip.flipping .playcard{animation:none}
}

/* ---------- Overlays ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(10,8,5,.85); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.overlay[hidden]{display:none}
.panel{
  background:linear-gradient(170deg,#fbf3de,var(--cream) 60%,var(--cream-dark));
  color:var(--ink); border:3px solid var(--brass-dark); border-radius:14px;
  max-width:580px; width:100%; padding:26px 28px 30px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
  max-height:92vh; overflow:auto;
}
.panel h2{font-weight:900; font-size:1.9rem; color:var(--felt); margin-bottom:6px}
.panel p{margin:8px 0; line-height:1.45}
.panel .bigtime{font-family:'Oswald',sans-serif; font-size:2.6rem; font-weight:600; color:var(--felt)}
.panel .btn{margin-top:14px}
.modepick{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
@media (max-width:520px){ .modepick{grid-template-columns:1fr} }
.modecard{
  border:2.5px solid var(--brass-dark); border-radius:12px; padding:16px 14px 18px; cursor:pointer;
  background:linear-gradient(180deg,#fff8e8,#f2e6c8); text-align:center;
  transition:transform .1s ease, box-shadow .15s;
}
.modecard:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.3)}
.modecard:focus-visible{outline:3px solid var(--brass); outline-offset:2px}
.modecard h3{font-family:'Oswald',sans-serif; letter-spacing:.14em; font-size:1.25rem; color:var(--felt); margin-bottom:6px}
.modecard p{font-size:.85rem; line-height:1.35; color:#4a3f2c; margin:0}
.standings{margin:14px auto 0; width:100%; max-width:460px; border-collapse:collapse; font-size:.92rem}
.standings th{font-family:'Oswald',sans-serif; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:#7a5c1e; border-bottom:2px solid var(--brass-dark); padding:4px 8px}
.standings td{padding:5px 8px; border-bottom:1px solid #d8c69a}
.standings tr.latest td{background:rgba(200,162,77,.22); font-weight:600}
.panel input[type=text]{
  width:100%; max-width:320px; font-family:'Fraunces',serif; font-size:1.1rem; padding:10px 14px;
  border-radius:8px; border:2px solid var(--brass-dark); background:#fff; color:var(--ink); margin-top:8px;
}
.panel .choices{max-width:420px; margin:10px auto 0}
.smallnote{font-size:.78rem; color:#7a6a45; margin-top:12px}
/* very short windows (e.g. 150% zoom on a 1080p monitor): trim the trimmings */
@media (max-height:760px){
  .tagline,.modebadge{display:none}
  h1{font-size:1.3rem}
  .marquee{padding:4px 18px 5px}
  .artslot{height:108px}
  .playcard{min-height:230px}
  .cyl{height:170px}
  .frame{max-width:min(100%, calc((100vh - 270px) * 1.6))}
}

footer{max-width:1180px; margin:26px auto 0; text-align:center; font-size:.72rem; color:#6b5a3a}