*{box-sizing:border-box}body{margin:0;background:#110c13;color:#f6eef1;font:16px system-ui,sans-serif;min-height:100dvh}header,main,footer{max-width:1180px;margin:auto;padding:16px 22px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #38232e}.brand{font-size:12px;letter-spacing:.16em;color:#d891a7}h1{margin:4px 0 0;font-size:30px}.hud{display:flex;gap:18px;align-items:center;font-variant-numeric:tabular-nums;font-size:22px}button,select,input,a{font:inherit}button,select{background:#291b26;color:#fff;border:1px solid #62404e;border-radius:9px;padding:10px 13px;cursor:pointer;min-height:44px}button:hover,button:focus-visible{background:#51273a}button:disabled{opacity:.4}.controls{display:flex;gap:8px;flex-wrap:wrap}#new{background:#b82952;border-color:#e85379}#message{min-height:25px;color:#eec3cf;margin:14px 0}#board{--w:calc((100% - 6 * 8px)/7);--h:calc(var(--w) * 1.42);background:radial-gradient(ellipse at 50% 35%,#263d38,#142824 75%);border:1px solid #354e46;border-radius:16px;padding:18px 14px 30px;min-height:500px;user-select:none;touch-action:pan-y}#board.spider{--w:calc((100% - 9 * 6px)/10)}#top{display:flex;gap:8px;margin-bottom:24px;min-height:95px}.slot,.pile{width:var(--w);flex-shrink:0;aspect-ratio:1/1.42;border-radius:7px;position:relative}.slot{border:1px dashed #90a79966;color:#afc3b8;display:flex;align-items:center;justify-content:center;font-size:25px}.spacer{flex:1}#columns{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.spider #columns{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.column{position:relative;min-height:180px;border:1px dashed #789d872d;border-radius:7px}.card{position:absolute;left:0;width:100%;aspect-ratio:1/1.42;border-radius:7px;background:#faf6ef;color:#202028;border:1px solid #d9d4ce;box-shadow:0 2px 4px #0005;cursor:pointer;padding:4px;touch-action:none}.card.red{color:#c42040}.card.back{background:#050505 url(back.webp) center/contain no-repeat;border:2px solid #c91b3e}.card.selected{outline:3px solid #ffce70;outline-offset:1px;z-index:200}.card .corner{font:bold clamp(12px,2.1vw,25px)/1.05 Georgia,serif;display:flex;flex-direction:column;width:30%}.card .big{position:absolute;left:0;right:0;text-align:center;top:37%;font:clamp(18px,4vw,44px) Georgia,serif}.card .lower{position:absolute;right:5px;bottom:5px;transform:rotate(180deg)}.pile .card{top:0}.stockCount{position:absolute;bottom:5px;right:5px;background:#000b;color:#fff;border-radius:5px;padding:2px 5px;font-size:12px}.guide{color:#b3aaaF;font-size:14px}.hinted{outline:3px solid #ffe3a0!important}footer{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#bd939f}dialog{color:#fff;background:#21151e;border:1px solid #774357;border-radius:16px;padding:22px;width:min(92vw,470px);max-height:90dvh}dialog::backdrop{background:#000a}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}h2{margin:0;font-size:23px}dialog button,dialog a,dialog label{display:block;width:100%;margin:9px 0}dialog a{color:#ffd2dd;text-decoration:none;padding:12px;border:1px solid #62404e;border-radius:8px}.dialog-head button{width:44px;margin:0}input{width:100%;padding:12px;margin-top:6px;border-radius:8px;border:1px solid #774357;background:#100c10;color:#fff}table{border-collapse:collapse;width:100%;font-size:14px}th,td{padding:10px 5px;text-align:left;border-bottom:1px solid #4a2f3a}td:nth-child(2){text-align:center}#stats{font-size:14px;color:#cfacb7}@media(max-width:600px){header,main,footer{padding:10px}h1{font-size:23px}.brand{font-size:10px}.controls{gap:5px}button,select{font-size:14px;padding:8px}#board{padding:12px 5px 25px;border-radius:10px;--w:calc((100% - 6 * 4px)/7)}#board.spider{--w:calc((100% - 9 * 3px)/10)}#columns{gap:4px}.spider #columns{gap:3px}#top{gap:4px;min-height:58px;margin-bottom:18px}.card{padding:2px;border-radius:4px}.card .corner{font-size:13px}.spider .card .corner{font-size:11px}.card .lower{display:none}.card .big{font-size:24px}.spider .card .big{font-size:18px}.card.back{border-width:1px}footer{flex-wrap:wrap}.hud{font-size:18px;gap:12px}}

/* Large, repeated values stay readable in the exposed strip of every card. */
.card{container-type:inline-size;padding:3px}.card.selected{z-index:auto;outline:3px solid #ffca6a;box-shadow:0 0 0 2px #573322}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:1px;line-height:1;white-space:nowrap;font-family:Arial,sans-serif;font-weight:800;padding:2px 1px}.card-heading b{font-size:clamp(18px,42cqw,36px)}.card-heading>span{font-size:clamp(13px,32cqw,28px)}.card.ten .card-heading b{font-size:clamp(15px,36cqw,30px)}.card-face{position:absolute;inset:32% 2px 7%;display:flex;align-items:center;justify-content:center;gap:2px;line-height:1;white-space:nowrap;font-family:Arial,sans-serif}.card-face b{font-size:clamp(24px,55cqw,72px);font-weight:800}.card-face>span{font-size:clamp(17px,34cqw,42px)}.card.ten .card-face b{font-size:clamp(20px,46cqw,60px)}.drag-run{position:fixed;z-index:2000;pointer-events:none;filter:drop-shadow(0 9px 12px #0007);transform:rotate(-2deg)}.drag-run .card{outline:2px solid #ffcd75}.dragging .card{cursor:grabbing}.win-burst{position:absolute;left:50%;top:65px;pointer-events:none}.win-burst i{position:absolute;width:6px;height:8px;border-radius:2px;background:#ffcd75;animation:spark 1100ms var(--delay) ease-out forwards}.win-burst i:nth-child(3n){background:#fa4c80}.win-burst i:nth-child(3n+1){background:#f9eff3}.won-pop{animation:win-pop 250ms ease-out}@keyframes spark{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}@keyframes win-pop{from{transform:scale(.96)}to{transform:scale(1)}}@media(max-width:600px){.card{padding:2px}.card-heading{padding:1px 0}.spider .card-heading b{font-size:clamp(17px,44cqw,23px)}.spider .card-heading>span{font-size:clamp(12px,31cqw,18px)}.spider .card.ten .card-heading b{font-size:clamp(14px,35cqw,20px)}.card-face{gap:1px}.spider .card-face b{font-size:clamp(22px,54cqw,35px)}.spider .card-face>span{font-size:clamp(14px,32cqw,21px)}.spider .card.ten .card-face b{font-size:clamp(17px,43cqw,28px)}}@media(prefers-reduced-motion:reduce){.win-burst,.won-pop{animation:none!important}}

.card.stacked .card-face{display:none}.card.stacked .card-heading{height:31px;justify-content:center;gap:3px}.spider .card.stacked .card-heading{height:28px;gap:1px}.spider .card.ten .card-heading>span{font-size:10px}.spider .card.ten .card-face>span{font-size:10px}

.card{color:#16233b}.card.red{color:#cd183e}.pip-field{position:absolute;inset:23% 13% 12%;display:block}.pip{position:absolute;transform:translate(-50%,-50%);font:clamp(10px,24cqw,35px)/1 Georgia,serif}.pip.inverted{transform:translate(-50%,-50%) rotate(180deg)}.court-art{position:absolute;left:7%;top:22%;width:86%;height:70%}.card-tail{position:absolute;bottom:3px;right:3px;transform:rotate(180deg);display:flex;gap:1px;font:bold clamp(9px,22cqw,18px)/1 Arial,sans-serif}.card.stacked .pip-field,.card.stacked .court-art,.card.stacked .card-tail{display:none}.card.stacked .card-heading{justify-content:space-between}.drop-valid{box-shadow:inset 0 0 0 3px #ffce78;background:#ffeab91a}.win-sign{position:relative;width:100%;height:155px;margin-bottom:12px;overflow:hidden;background:radial-gradient(ellipse,#48223a,#21151e 75%);border-radius:10px}.win-sign svg{width:100%;height:100%;overflow:visible}.win-sign img{position:absolute;width:47px;height:70px;object-fit:contain;transform:translate(-50%,-72%) rotate(-12deg);filter:drop-shadow(0 3px 3px #0008);transition:opacity .25s}.win-sign img.finished{opacity:.6}.wide-table header{padding:7px 14px}.wide-table header h1{font-size:21px;margin:0}.wide-table .brand{display:none}.wide-table main{padding:8px 12px}.wide-table #message{position:fixed;left:50%;bottom:7px;transform:translateX(-50%);z-index:5;background:#12231cdd;border-radius:5px;padding:4px 12px;margin:0;font-size:12px;pointer-events:none;min-height:0}.wide-table #message:empty{display:none}.wide-table .guide,.wide-table footer{display:none}.wide-table #board{min-height:calc(100dvh - 64px);padding:10px 12px 20px}.wide-table #top{min-height:70px;margin-bottom:10px}.wide-table header,.wide-table main{max-width:none}.wide-table #columns{gap:9px}.wide-table #board.spider{--w:calc((100% - 9 * 9px)/10)}.wide-table .card{border-radius:6px}.wide-table .card-heading b{font-size:clamp(18px,30cqw,30px)}.wide-table .card-heading>span{font-size:clamp(15px,25cqw,24px)}.wide-table .card.stacked .card-heading{height:34px}.wide-table dialog .controls{display:flex;margin-bottom:16px}.wide-table #top .pile,.wide-table #top .slot{max-width:85px}.wide-table .pip{font-size:clamp(16px,25cqw,38px)}@media(max-width:600px){.card-tail{display:none}.pip-field{inset:28% 12% 8%}.spider .pip{font-size:clamp(8px,26cqw,14px)}}@media(prefers-reduced-motion:reduce){.win-sign img{transition:none}}

.wide-table #board{position:relative}.wide-table #board.spider #top{position:absolute;bottom:12px;right:16px;width:150px;min-height:0;height:90px;margin:0;align-items:flex-end}.wide-table #board.spider #top .pile{width:58px}.wide-table #board.spider #columns{padding-bottom:90px}

.win-deck{position:absolute;left:1%;bottom:10%;width:32px;height:48px;border:1px solid #d82750;border-radius:4px;background:#050505 url(back.webp) center/contain no-repeat}.win-sign .win-lipstick{z-index:1;transform:translate(-50%,-8%) rotate(-12deg);transform-origin:50% 8%}

/* One viewport, persistent controls, landscape phone table. */
body{height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:54px minmax(0,1fr) 54px}header{width:100%;max-width:none;padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))}header .brand{display:none}header h1{font-size:22px;margin:0}.hud{font-size:17px;gap:14px}#moves{font-size:13px}main{width:100%;max-width:none;min-height:0;padding:0 8px;position:relative;display:flex}#board{width:100%;height:100%;min-height:0;position:relative;padding:8px 12px;overflow:hidden;touch-action:none;border-radius:10px;display:flex;flex-direction:column;align-items:center;--w:var(--card-width,70px)}#board.spider{--w:var(--card-width,70px)}#top{width:100%;height:var(--card-height);min-height:0;flex-shrink:0;gap:6px;margin-bottom:10px}.pile,.slot{width:var(--card-width);height:var(--card-height);aspect-ratio:auto}#columns{flex:1;min-height:0;gap:6px;grid-template-columns:repeat(7,minmax(0,1fr))}.spider #columns{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.column{min-height:0}.card{height:var(--card-height);aspect-ratio:auto}.card-heading b{font-size:clamp(12px,32cqw,30px)}.card-heading>span{font-size:clamp(11px,27cqw,25px)}.card.ten .card-heading b{font-size:clamp(11px,28cqw,27px)}.card.stacked .card-heading,.spider .card.stacked .card-heading{height:var(--strip);padding:0 1px;gap:1px}.card.stacked .card-heading b{font-size:min(29cqw,calc(var(--strip) - 2px))}.card.stacked .card-heading>span,.spider .card.ten.stacked .card-heading>span{font-size:min(25cqw,calc(var(--strip) - 2px))}.spider #top{position:absolute;bottom:8px;right:14px;display:flex;align-items:center;gap:12px;height:var(--card-height);margin:0}.spider #columns{flex:none;height:calc(100% - var(--card-height) - 12px);margin-bottom:auto}.guide,footer{display:none}.play-actions{display:flex;align-items:center;justify-content:center;gap:14px;padding:4px max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom));background:#110c13}.play-actions button{min-width:120px;min-height:42px;padding:7px 12px}#message{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);margin:0;min-height:0;z-index:500;background:#101c18e8;border-radius:6px;padding:6px 12px;font-size:12px;max-width:90%;pointer-events:none}#message:empty{display:none}.controls{display:grid;grid-template-columns:1fr 1fr;margin:12px 0}.controls #new{grid-column:1/-1}.controls select{min-width:0;width:100%}dialog{overflow:auto}.audio-help{font-size:13px;color:#e0bdc8}#rotate{display:none}.portrait-phone header,.portrait-phone main,.portrait-phone .play-actions{visibility:hidden}.portrait-phone #rotate{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;background:#110c13;z-index:3000}.rotate-icon{font-size:76px;color:#ef799c;margin-bottom:22px}#rotate p{max-width:300px;line-height:1.6;color:#dec5cf}#rotate a{padding:12px 22px;border:1px solid #9b526d;border-radius:10px;color:white;margin-top:16px}@media(max-height:450px){body{grid-template-rows:44px minmax(0,1fr) 48px}header h1{font-size:19px}.hud{gap:10px;font-size:15px}header button{min-height:34px;padding:3px 10px}.play-actions{gap:8px}.play-actions button{min-width:100px;font-size:14px;min-height:38px}#board{padding-top:5px;padding-bottom:5px}#top{margin-bottom:7px}.card-tail{display:none}.pip-field{inset:26% 13% 10%}}
main{height:100%;margin:0}#board{flex:1}

.rank-tabs{display:flex;gap:.5rem;margin:.5rem 0}.rank-tabs button[aria-pressed="true"]{outline:2px solid currentColor;font-weight:bold}