:root{
  --navy:#13244a; --navy2:#0e1b39; --gold:#c9a54e; --gold2:#f0d78c; --felt:#27194A; --ink:#f6f1e3;
  --gap:8px; --cw:80px; --ch:107px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  color:var(--ink); background:#1a1036;
  display:flex; flex-direction:column; min-height:100dvh; overflow:hidden;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 35%, #4a2a9e 0%, #2d1a63 45%, #170e33 100%);
}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;
  background-image:repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}
.bar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 8px;flex-wrap:wrap;justify-content:space-between}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.mark{width:26px;height:26px;background:url(emblem.svg) center/contain no-repeat;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
h1{font-size:20px;margin:0;font-weight:600;letter-spacing:.3px;white-space:nowrap}
h1 em{color:var(--gold2);font-style:italic}
.stats{display:flex;gap:6px}
.stat{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:4px 8px;border-radius:10px;
  background:rgba(0,0,0,.25);border:1px solid rgba(201,165,78,.35)}
.stat .k{font:600 9px/1.2 -apple-system,system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#cdbb86}
.stat .v{font:700 16px/1.25 -apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.btn{font:600 14px -apple-system,system-ui,sans-serif;border-radius:999px;padding:9px 14px;cursor:pointer;border:1px solid var(--gold);color:var(--ink);background:rgba(0,0,0,.25)}
.btn:focus-visible,.card:focus-visible,.x:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.btn.gold{background:linear-gradient(180deg,#f0d78c,#c9a54e 60%,#a9852f);color:#1a1405;border:none;font-size:16px;padding:13px 22px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn:active{transform:scale(.97)}
.table{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:6px 10px;min-height:0}
.board{display:grid;gap:var(--gap);grid-template-columns:repeat(var(--cols,4), var(--cw));grid-auto-rows:var(--ch);perspective:900px}
.card{position:relative;width:var(--cw);height:var(--ch);border:0;padding:0;background:none;cursor:pointer;border-radius:10px;
  animation:deal .5s cubic-bezier(.2,.8,.25,1.1) both; animation-delay:calc(var(--i) * 35ms)}
@keyframes deal{from{opacity:0;transform:translateY(-40px) rotate(-8deg) scale(.7)}to{opacity:1;transform:none}}
.inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.3,1.15);border-radius:10px}
.card.up .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4)}
.back-face,.face.back{
  background:url(back-tile.svg) center/22px 22px, var(--navy);
  border:2px solid #e3c674;
}
.face.back::before,.back-face::before{content:"";position:absolute;inset:5px;border:1px solid rgba(240,215,140,.75);border-radius:6px;
  box-shadow:inset 0 0 0 2px rgba(14,27,57,.9), inset 0 0 0 3px rgba(240,215,140,.4)}
.face.back::after,.back-face::after{content:"";position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:url(emblem.svg) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.face.back .sheen{position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.18),transparent 40%,transparent 60%,rgba(255,255,255,.06))}
.face.front{transform:rotateY(180deg);background:#f8f4ea;border:3px solid #f8f4ea}
.face.front img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px;background:#ddd}
.card.matched .face.front{border-color:#f0d78c;box-shadow:0 0 0 2px rgba(240,215,140,.55),0 0 18px 4px rgba(240,215,140,.55),0 3px 8px rgba(0,0,0,.4);animation:glow 2.6s ease-in-out infinite}
.card.matched .inner{animation:pop .45s ease .25s}
@keyframes glow{50%{box-shadow:0 0 0 2px rgba(240,215,140,.35),0 0 10px 2px rgba(240,215,140,.3),0 3px 8px rgba(0,0,0,.4)}}
@keyframes pop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.08)}100%{transform:rotateY(180deg) scale(1)}}
.card.miss .inner{animation:shake .38s ease}
@keyframes shake{0%,100%{transform:rotateY(180deg) translateX(0)}25%{transform:rotateY(180deg) translateX(4px)}75%{transform:rotateY(180deg) translateX(-4px)}}
.foot{display:flex;justify-content:space-between;gap:10px;padding:6px 14px calc(env(safe-area-inset-bottom) + 10px);font:500 12px -apple-system,system-ui,sans-serif;color:#cfc4a2}
.foot a{color:var(--gold2)}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font:500 15px -apple-system,system-ui,sans-serif;color:#e9dfbf;text-align:center;padding:20px}
.loading[hidden]{display:none}
.spin-card{width:84px;height:116px;position:relative;animation:spin 1.4s cubic-bezier(.5,0,.5,1) infinite;transform-style:preserve-3d}
.spin-card .back-face{position:absolute;inset:0;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
@keyframes spin{to{transform:rotateY(360deg)}}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(20,10,45,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:18px;animation:fade .3s ease}
.overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.panel{position:relative;background:linear-gradient(180deg,#16295a,#0e1b39);border:2px solid var(--gold);border-radius:18px;padding:26px 22px 20px;text-align:center;max-width:340px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:rise .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rise{from{transform:translateY(30px) scale(.92);opacity:0}}
.seal{width:64px;height:64px;margin:-58px auto 8px;background:url(emblem.svg) center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.panel h2{margin:4px 0 6px;font-size:26px;color:var(--gold2)}
.winstats{font:600 17px -apple-system,system-ui,sans-serif;margin:6px 0}
.winbest{font:500 14px -apple-system,system-ui,sans-serif;color:#e6d499;margin:0 0 18px;min-height:1em}
.hint{font:400 12px -apple-system,system-ui,sans-serif;color:#b9b08f;margin:14px 0 0}
.viewer .panel.photo{max-width:min(560px,94vw);padding:0;overflow:hidden;text-align:left}
.viewer img{display:block;width:100%;max-height:62dvh;object-fit:contain;background:#000}
.cap{padding:14px 16px 16px}
.cap h3{margin:0 0 4px;font-size:18px;line-height:1.25}
.cap p{margin:0 0 10px;font:500 12px -apple-system,system-ui,sans-serif;color:#cdbb86}
.cap a{font:600 14px -apple-system,system-ui,sans-serif;color:var(--gold2)}
.x{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 44px);transform:translateX(-50%);background:rgba(0,0,0,.75);border:1px solid var(--gold);padding:8px 14px;border-radius:999px;font:500 13px -apple-system,system-ui,sans-serif;z-index:30;max-width:92vw;text-align:center}
@media (max-width:560px){ .stats{order:3;width:100%;justify-content:center;gap:8px} .stat{flex:1;max-width:110px} }
@media (max-width:420px){ .btn.ghost span{display:none} .btn.ghost{padding:8px 11px;font-size:16px} .stat{min-width:48px;padding:3px 6px} h1{font-size:18px}}
@media (max-height:460px){ .bar{padding-top:calc(env(safe-area-inset-top) + 6px);padding-bottom:4px} h1{font-size:17px} .stat .v{font-size:14px} .foot{padding-top:2px;padding-bottom:calc(env(safe-area-inset-bottom) + 4px)} .seal{display:none} .panel{padding:16px 18px 14px} .panel h2{font-size:22px}}
@media (prefers-reduced-motion:reduce){ .inner{transition-duration:.01s} .card{animation:none} .card.matched .face.front{animation:none} }