*{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}}
