:root{--w:90px;--h:132px;--step:30px;--gold:#d4b480;--muted:#b8adc7}*{box-sizing:border-box}body{margin:0;background:#252237;color:#f4eddf;font:14px system-ui;min-height:100dvh;background-image:radial-gradient(ellipse at 50% 0,#443a55,transparent 75%)}main{max-width:1500px;margin:auto;padding:24px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c9af842d;padding-bottom:20px}h1{font:38px Georgia;margin:5px 0}h1 span{color:var(--gold);font-size:30px}.eyebrow,.label{font-size:10px;letter-spacing:2px;color:var(--gold)}.eyebrow{margin:0}.subtitle{color:var(--muted);margin:8px 0 0}.btn{font:inherit;display:inline-block;color:inherit;text-decoration:none;background:#ffffff07;border:1px solid #c5b3d04a;border-radius:6px;padding:10px 16px;cursor:pointer}.btn:hover{background:#ffffff14}.btn:focus-visible,.card:focus-visible,.slot:focus-visible{outline:3px solid #e8c990;outline-offset:3px}.btn:disabled{opacity:.4;cursor:default}.primary{background:var(--gold);color:#2b263b;border-color:var(--gold)}.primary:hover{background:#e6c898}.toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:23px 0}.stats{display:flex;gap:32px}.stats small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.6px;margin-bottom:6px}.stats b{font-weight:500;font-variant-numeric:tabular-nums}.actions{display:flex;gap:8px}.upper{display:flex;align-items:center;justify-content:space-between;border:1px solid #c5b3d024;background:#14132635;border-radius:12px;padding:15px 23px;margin-bottom:26px}.label{margin:0 0 12px}.label span{color:var(--muted);letter-spacing:1px}.guide{display:flex;gap:20px;align-items:center}.guide p:last-child{color:var(--muted);line-height:1.8;font:17px Georgia;margin:0}.mini-back{width:60px;height:86px;border:3px solid #cfb083;border-radius:5px;background:repeating-conic-gradient(from 45deg,#ab8c60 0 25%,#29243e 0 50%) 0 0/14px 14px;display:grid;place-items:center;color:#fff0c9;font:32px Georgia;box-shadow:0 3px 12px #0004}.win-count{text-align:center;color:var(--gold)}.win-count b{font:32px Georgia}.win-count small{display:block;font-size:9px;letter-spacing:2px;margin-top:6px}.board-heading{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;gap:12px}.board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;min-height:270px}.column{position:relative;min-width:0}.slot{position:relative;width:var(--w);height:var(--h);border:1px dashed #baa4c34a;border-radius:7px;background:#16142730;display:grid;place-items:center;color:#bdacc260;font:28px Georgia;cursor:pointer}.slot.valid{box-shadow:0 0 0 2px var(--gold);background:#d4b48018}.column>.slot{position:absolute;inset:0 auto auto 0}.card{position:absolute;width:var(--w);height:var(--h);top:0;left:0;background:linear-gradient(140deg,#fff9ec,#e6dccd);border:1px solid #c8bba4;border-radius:7px;box-shadow:0 3px 6px #100d2255;color:#322d47;padding:0;cursor:pointer;touch-action:none;user-select:none;overflow:hidden}.card.red{color:#ae4358}.corner{position:absolute;left:6px;top:5px;font:bold var(--font,19px) Georgia;display:flex;align-items:center;gap:4px}.bottom{left:auto;top:auto;right:6px;bottom:5px;transform:rotate(180deg)}.pip{position:absolute;inset:0;display:grid;place-items:center;font:calc(var(--w)*.48) Georgia;pointer-events:none}.unranked .pip{margin:19%;border:1px solid #b99d77;border-radius:50%}.unranked .pip:before,.unranked .pip:after{content:'✧';font:12px Georgia;position:absolute;color:#b39467;top:-12px}.unranked .pip:after{top:auto;bottom:-12px}.card.selected{box-shadow:0 0 0 3px var(--gold),0 6px 14px #0005}.card.unavailable{cursor:default}.back{background:repeating-conic-gradient(from 45deg,#a98a5e 0 25%,#29243e 0 50%) 0 0/18px 18px;border:4px solid #d2b58a;box-shadow:0 3px 0 #92809a,0 6px 0 #67596e,0 10px 18px #100c2355;cursor:default;display:grid;place-items:center;color:#f5e1b9}.back:before{content:'✦';border:1px solid #d4b480;background:#29243ee8;border-radius:50%;width:70%;height:70%;display:grid;place-items:center;font:calc(var(--w)*.5) Georgia}.back small{position:absolute;bottom:5px;font:8px system-ui;letter-spacing:1px;background:#29243e;padding:3px}.complete-pile{color:var(--gold);font-size:10px;text-align:center;padding-top:7px;width:var(--w)}#status{min-height:24px;color:#e4cba2;text-align:center;font-size:12px;margin:24px 0 18px}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #c5b3d024;padding-top:16px;gap:15px}footer .btn{margin-right:7px}footer p{font-size:11px;color:var(--muted);line-height:1.8;text-align:right;margin:0}.ghost{position:fixed;pointer-events:none;z-index:100;opacity:.92}.hint{animation:glow .7s ease 3}@keyframes glow{50%{box-shadow:0 0 0 4px #e6c898}}dialog{max-width:510px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;background:#f5eddf;color:#30293e;border:1px solid var(--gold);border-radius:15px;padding:30px;box-shadow:0 25px 100px #0007}dialog::backdrop{background:#171321bf;backdrop-filter:blur(5px)}dialog h2{font:30px Georgia}dialog p,dialog li{line-height:1.7}dialog li{margin-bottom:10px}dialog .eyebrow{color:#886a3c}dialog .btn{border-color:#8f7d9855}dialog .close{float:right;border:0;background:none;font-size:26px;color:inherit;cursor:pointer}dialog .primary{color:#30293e}@media(max-width:700px){main{padding:18px 14px}h1{font-size:29px}.eyebrow{font-size:8px;letter-spacing:1.5px}.subtitle{font-size:11px}.btn{font-size:12px;padding:9px 11px}.stats{gap:18px}.stats small{font-size:8px}.toolbar{padding:18px 0}.upper{padding:12px 14px}.guide{gap:10px}.guide .label{display:none}.guide p:last-child{font-size:13px}.mini-back{width:40px;height:60px;background-size:10px 10px}.label{font-size:8px;letter-spacing:1px}.win-count{display:none}.board{gap:5px}.board-heading{font-size:9px}.corner{left:3px;top:3px;gap:2px}.bottom{right:3px;bottom:3px;left:auto;top:auto}.card,.slot{border-radius:4px}.back{border-width:2px;background-size:10px 10px}.back small{font-size:6px;letter-spacing:0;bottom:2px}.unranked .pip:before,.unranked .pip:after{font-size:8px;top:-8px}.unranked .pip:after{top:auto;bottom:-8px}.complete-pile{font-size:7px}footer p{font-size:9px}.board-heading span{max-width:165px;text-align:right}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.motion-card{position:fixed!important;z-index:1000;pointer-events:none;transform-origin:center;will-change:transform}
.motion-reverse{position:absolute;inset:0;width:100%;height:100%;z-index:5;border-radius:inherit}
main.in-motion #board,main.in-motion #cell{pointer-events:none}
.confetti{position:fixed;top:-20px;width:8px;height:13px;z-index:2000;pointer-events:none;animation:confetti-fall 2.8s ease-in forwards}
@keyframes confetti-fall{to{transform:translateY(110vh) rotate(720deg)}}

dialog .btn + .btn{margin-left:10px}
