@import"https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap";:root{--bg-ink: #080f0c;--felt-deep: #0f2318;--felt-mid: #173a28;--felt-border: #1c3d29;--card-back-base: #1e3a8a;--card-back-stripe: #2952c4;--btn-base: #1a5c38;--btn-hover: #22764a;--btn-border: #2f8e5e;--card-face: #f8f6f0;--card-black: #1a1a1a;--card-red: #c41e1e;--accent-gold: #f5c518;--accent-gold-dim: #c8ab6e;--text-primary: #dbe7de;--text-muted: #8ea697;--gutter: 160px;--board-max-w: 1100px;--board-min-w: 720px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text-primary)}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:0 var(--gutter);min-width:calc(var(--board-min-w) + var(--gutter) * 2);background:radial-gradient(ellipse at 50% 0%,rgba(22,60,40,.5) 0%,transparent 60%),radial-gradient(circle at 20% 0%,#10291c 0%,var(--bg-ink) 55%,#060c09 100%);overflow-x:auto}.page{width:100%;min-width:var(--board-min-w);max-width:var(--board-max-w);margin:0 auto;padding:24px}.toolbar{display:flex;flex-wrap:nowrap;gap:10px;align-items:center;margin-bottom:16px;min-width:0;min-height:52px;background:#0000002e;border:1px solid rgba(110,158,128,.12);border-radius:12px;padding:8px 16px}.toolbar h1.logo{font-family:Fredoka One,cursive;font-size:22px;margin:0 8px 0 0;color:var(--text-primary);letter-spacing:.5px;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:4px}.logo-icon{display:inline-block;width:26px;height:32px;position:relative;margin-right:6px;flex-shrink:0}.logo-icon:before,.logo-icon:after{content:"";position:absolute;width:18px;height:24px;border-radius:3px;border:1.5px solid rgba(180,155,70,.4)}.logo-icon:before{background:linear-gradient(135deg,#0e2d4e,#0a2240);bottom:0;left:0;transform:rotate(-8deg)}.logo-icon:after{background:linear-gradient(180deg,#fff,#f8f5ee);bottom:2px;left:6px;transform:rotate(5deg);box-shadow:0 1px 4px #0000004d}.logo-accent{color:var(--accent-gold);margin-left:2px}.btn-icon{padding:7px 10px;min-width:36px;text-align:center;font-size:16px;line-height:1}.toolbar-spacer{flex:1;min-width:8px}select,button{border:1px solid var(--btn-border);background:var(--btn-base);color:#e8f2ec;border-radius:8px;padding:7px 16px;height:36px;font-size:13px;transition:background .16s ease,transform .12s ease,box-shadow .16s ease;white-space:nowrap;flex-shrink:0}button{cursor:pointer}select:hover,button:hover{background:var(--btn-hover)}button:active{transform:translateY(1px)}select:focus,button:focus-visible{outline:none;box-shadow:0 0 0 2px #f5c51880}.stats{display:flex;gap:14px;color:var(--text-muted);font-size:13px;flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}.stats span{display:inline-block;min-width:3.5em}.board{container-type:inline-size;border:1px solid var(--felt-border);border-radius:16px;padding:2%;position:relative;overflow:hidden;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.015) 1px,transparent 1px),radial-gradient(ellipse at 50% 15%,rgba(34,80,55,.45) 0%,transparent 55%),linear-gradient(165deg,#122d1fd1,#0d1f16f7);background-size:4px 4px,100% 100%,100% 100%;box-shadow:inset 0 2px 16px #0000004d,inset 0 -1px #ffffff0a,0 12px 48px #00000073}.board:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:16px;background:radial-gradient(ellipse at 50% 40%,transparent 50%,rgba(0,0,0,.25) 100%);pointer-events:none;z-index:0}.board>*{position:relative;z-index:1}.top-row{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:1.8cqi;margin-bottom:2.4cqi;align-items:start}.top-spacer .pile.pile-ghost{border:none;background:transparent;pointer-events:none}.tableau-row{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:1.8cqi;align-items:start}.pile-wrapper{display:flex;flex-direction:column;min-width:0}.pile{width:100%;border:.15cqi solid rgba(110,158,128,.25);border-radius:10px;position:relative;padding:0;background:#0000001a;box-shadow:inset 0 2px 6px #0000001f}.pile:not(.tableau):before{content:"";display:block;padding-top:calc(150% - .15cqi)}.pile-label{font-size:1.5cqi;color:#98b3a2;margin-bottom:.6cqi;text-align:left;min-height:2.4cqi;font-variant-numeric:tabular-nums}.tableau-row .pile-label{display:none}.pile-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4.8cqi;color:#d8e7de59;pointer-events:none}.tableau{height:65cqi;min-height:65cqi}.card{container-type:size;width:calc(100% - .3cqi);aspect-ratio:2/3;border-radius:8px;border:.15cqi solid rgba(0,0,0,.08);position:absolute;left:.15cqi;background:#fff;box-shadow:0 1px 3px #0000002e,0 4px 12px #00000052;-webkit-user-select:none;user-select:none;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;transform-style:preserve-3d;backface-visibility:hidden}.card:hover{transform:translateY(-4px);box-shadow:0 4px 10px #00000038,0 10px 24px #00000073}.card.fd:hover{transform:none;box-shadow:inset 0 0 12px #00104880}.cc{position:absolute;top:5%;left:8%;width:25%;display:flex;flex-direction:column;align-items:center;font-family:Fredoka One,cursive}.cc .cr{font-size:34cqi;line-height:.9;margin-bottom:1cqi;white-space:nowrap;letter-spacing:0}.cc .cr.r1,.cc .cr.r2{letter-spacing:0}.cc .csuit{font-size:24cqi;line-height:1;font-variant-emoji:text;font-family:sans-serif}.cm{position:absolute;bottom:2%;left:50%;transform:translate(-50%);font-size:75cqi;line-height:1;display:flex;justify-content:center;align-items:center;font-variant-emoji:text;font-family:sans-serif;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}.red{color:red}.black{color:#000}.card.fd{background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(180,160,80,.08) 5px,rgba(180,160,80,.08) 6px),repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(180,160,80,.08) 5px,rgba(180,160,80,.08) 6px),radial-gradient(ellipse at 50% 50%,rgba(40,70,110,.4) 0%,transparent 70%),linear-gradient(180deg,#0e2d4e,#0a2240,#071a38);border-color:#b49b4673;box-shadow:inset 0 0 0 3px #b49b461f,inset 0 0 14px #0010488c;overflow:hidden}.card.fd:after{content:"♠";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.6cqi;color:#b4a05a1f;pointer-events:none;font-family:sans-serif}.card.selected{outline:3px solid var(--accent-gold);transform:translateY(-8px);box-shadow:0 0 12px #ffe00059,0 6px 16px #00000059}.pile[data-target-zone=waste] .card{transform-style:flat;backface-visibility:visible}.pile[data-target-zone=waste] .card:not(:last-child){box-shadow:none;border-color:transparent;transition:none;pointer-events:none;cursor:default}.pile[data-target-zone=waste] .card:not(:last-child):hover{transform:none;box-shadow:none}.hint{margin-top:10px;color:var(--text-muted);font-size:13px}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:300;background:#0f2318eb;border:1px solid var(--felt-border);border-radius:10px;padding:8px 20px;font-size:13px;color:var(--text-primary);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 16px #00000059;animation:toast-in .2s ease-out;pointer-events:none;white-space:nowrap}.toast.toast-out{animation:toast-out .25s ease-in forwards}.toast.toast-error{border-color:#c83c3c80}.drag-ghost{position:fixed;pointer-events:none;z-index:1000;opacity:.85}.drag-ghost .card{position:relative;left:0;top:0;transform:scale(1.03);box-shadow:0 10px 26px #0000008c}.drag-ghost .card:first-child{margin-top:0}.card.dragging{opacity:.25}.pile.drop-target{box-shadow:inset 0 0 0 2px var(--accent-gold);border-color:#f5c518d9}@keyframes shake{0%,to{transform:translate(0)}16%{transform:translate(-6px)}33%{transform:translate(6px)}50%{transform:translate(-6px)}66%{transform:translate(6px)}83%{transform:translate(-6px)}}.card.shake{animation:shake .3s ease}@keyframes breathe{0%,to{opacity:.25}50%{opacity:.55}}.pile.tableau.empty-col{animation:breathe 2.5s ease-in-out infinite}.pile.tableau.empty-col.valid-target{box-shadow:inset 0 0 0 2px var(--accent-gold);border-color:#f5c518d9;animation:none;opacity:1}@keyframes card-flip{0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(90deg)}60%{transform:perspective(400px) rotateY(90deg)}to{transform:perspective(400px) rotateY(0)}}.card.flipping{animation:card-flip .35s ease}@keyframes bounce-in{0%{opacity:.5}to{opacity:1}}.card.bounce-in{animation:bounce-in .15s ease-out}@keyframes deal-in{0%{opacity:0}to{opacity:1}}.card.dealing{animation:deal-in .18s ease-out both}.fly-card{position:fixed;z-index:500;pointer-events:none;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #00000073;container-type:size;transition:top .25s ease-in-out,left .25s ease-in-out,width .25s ease-in-out,height .25s ease-in-out}.fly-card .fly-face{width:100%;height:100%;background:#fff;position:relative}.fly-card .fly-back{width:100%;height:100%;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(180,160,80,.08) 5px,rgba(180,160,80,.08) 6px),repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(180,160,80,.08) 5px,rgba(180,160,80,.08) 6px),radial-gradient(ellipse at 50% 50%,rgba(40,70,110,.4) 0%,transparent 70%),linear-gradient(180deg,#0e2d4e,#0a2240,#071a38);border:1px solid rgba(180,155,70,.45)}.card.fly-hidden{visibility:hidden}.confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;pointer-events:none}@keyframes card-scatter{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-r));opacity:0}}.card.scattering{animation:card-scatter 1.2s ease-out forwards;z-index:100;pointer-events:none}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:modal-fade-in .25s ease}.modal-card{background:#122d1c;border:1px solid #2a5e3a;border-radius:16px;padding:36px 40px;min-width:320px;max-width:420px;text-align:center;box-shadow:0 16px 48px #00000080}.modal-card h2{font-size:28px;margin:0 0 12px;color:var(--text-primary)}.modal-card p{font-size:16px;color:#dbe7de;margin:0 0 24px;line-height:1.5}.modal-buttons{display:flex;gap:12px;justify-content:center}.modal-buttons button.btn-gold{background:var(--accent-gold);color:#1a1a1a;border-color:var(--accent-gold);font-weight:700}.modal-buttons button.btn-gold:hover{background:#e0b215}@media (max-width: 768px){.page{padding:12px}.toolbar{flex-wrap:wrap;gap:8px;padding:8px 12px;min-height:auto}.toolbar h1.logo{font-size:18px}.logo-icon{width:22px;height:28px;margin-right:4px}.logo-icon:before,.logo-icon:after{width:15px;height:20px}.toolbar-spacer{display:none}.stats{width:100%;justify-content:center;gap:12px;padding-top:4px;border-top:1px solid rgba(110,158,128,.12)}.board{padding:10px}.card{border-radius:6px}.pile{border-radius:8px}.top-row,.tableau-row{gap:6px}.tableau{height:440px;min-height:440px}.pile-label{font-size:9px}select,button{padding:6px 12px;height:32px;font-size:12px}.card.fd:after{font-size:18px}}@media (max-width: 480px){.page{padding:8px}.toolbar{padding:6px 10px;gap:6px}.toolbar h1.logo{font-size:15px;margin-right:2px}.logo-icon{width:18px;height:24px;margin-right:3px}.logo-icon:before,.logo-icon:after{width:12px;height:16px;border-radius:2px}.logo-icon:after{left:4px}.board{padding:6px;border-radius:10px}.card{border-radius:5px}.pile{border-radius:6px}.top-row,.tableau-row{gap:4px}.tableau{height:320px;min-height:320px}.pile-label{font-size:0}.pile-placeholder{font-size:20px}.card.fd:after{font-size:14px}select,button{padding:5px 10px;height:30px;font-size:11px;border-radius:6px}.stats{font-size:11px;gap:10px}.toast{font-size:12px;padding:6px 14px}.modal-card{padding:24px 20px;min-width:260px}.modal-card h2{font-size:22px}}