:root{--bw-accent: #72d5b0;--bw-accent-2: #a0efca;--bw-on-accent: #07241a}body[data-variant]{--bw-content-max: 1340px}body.bw-game-page[data-variant][data-screen=table] main.bw-shell{width:min(calc(100% - 2rem),var(--bw-content-max))}body[data-variant=spider]{--bw-accent: #b7a1f5;--bw-accent-2: #d7c8ff}body[data-variant=ember]{--bw-accent: #ffb765;--bw-accent-2: #ffd59e}.card-shell{width:min(1340px,100%);margin:0 auto;padding:1.4rem 1rem 2rem}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.card-heading h1{margin:0 0 .35rem;font-size:clamp(1.5rem,4vw,2.3rem)}.card-heading p{margin:0;color:var(--bw-text-muted);font-size:.85rem}.card-heading nav{display:flex;gap:.75rem;font-size:.78rem;flex-wrap:wrap}.card-heading nav a{color:var(--bw-text-muted)}.card-heading nav a[aria-current]{color:var(--bw-accent)}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.7rem}.toolbar button,.toolbar select,dialog button:where(:not(.bw-btn)){font:inherit;font-size:.8rem;min-height:44px;padding:.6rem .85rem;border-radius:.6rem;background:var(--bw-panel);color:var(--bw-text);border:1px solid var(--bw-border-strong);cursor:pointer}.toolbar label{font-size:.75rem;display:flex;align-items:center;gap:.4rem}.toolbar button:disabled{opacity:.4;cursor:default}.toolbar #newDeal,#confirmYes{background:var(--bw-accent);color:var(--bw-on-accent);border-color:transparent;font-weight:700}.counters{display:flex;gap:1rem;margin-left:auto;color:var(--bw-text-muted);font-size:.8rem}#message{min-height:2.8em;margin:.6rem 0;color:var(--bw-accent);font-size:.85rem;line-height:1.4}#selection{font-size:.78rem;color:var(--bw-text-muted);line-height:1.5;min-height:2.5em;margin:.7rem 0 0}body[data-variant] .bw-game-table{container-type:inline-size}#table{--gap: clamp(.32rem, .85cqw, .8rem);--pad: clamp(.55rem, 1.6cqw, 1.5rem);--card-max: 170px;--table-border: 2px;--fill-w: calc((100cqw - 2 * var(--pad) - 2 * var(--table-border) - (var(--columns) - 1) * var(--gap)) / var(--columns));--card-w: clamp(96px, var(--fill-w), var(--card-max));--card-h: calc(var(--card-w) * 1.45);--radius: clamp(4px, calc(var(--card-w) * .075), 10px);--step: max(34px, calc(var(--card-h) * .27));--felt: #12643c;--felt-dark: #062a19;--felt-light: #1f8a55;width:max(100%,calc(var(--columns) * var(--card-w) + (var(--columns) - 1) * var(--gap) + 2 * var(--pad) + 2 * var(--table-border)));padding:var(--pad);border:2px solid #00000055;border-radius:1.1rem;background:radial-gradient(ellipse 120% 80% at 50% -15%,#fff2,#fff0 62%),repeating-linear-gradient(48deg,#ffffff06 0 2px,#00000008 2px 4px),radial-gradient(ellipse 150% 130% at 50% 45%,var(--felt-light) 0%,var(--felt) 42%,var(--felt-dark) 100%);box-shadow:inset 0 0 0 2px #ffffff1f,inset 0 0 90px #00000059,0 14px 34px #00000047}body[data-variant=spider] #table{--felt: #3a3168;--felt-dark: #16132b;--felt-light: #574a91;--card-max: 120px}body[data-variant=ember] #table{--felt: #6c4320;--felt-dark: #2a1a0d;--felt-light: #98622f;--card-max: 150px}.top-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.7rem;margin-bottom:calc(var(--card-h) * .18 + .5rem)}#topPiles,#homePiles,.stock-area,.reserves{display:flex;gap:var(--gap);align-items:flex-start}#homePiles{justify-content:flex-end}.slot-wrap{width:var(--card-w);flex-shrink:0}.pile-label{display:block;font:600 clamp(.45rem,.55cqw,.62rem) system-ui,sans-serif;letter-spacing:.08em;color:#dff0e6cc;text-shadow:0 1px 2px #0007;white-space:nowrap;text-align:center;margin-bottom:.4rem}.single-pile{position:relative;height:var(--card-h)}.stock,.slot,.card{box-sizing:border-box;width:100%;height:var(--card-h);border-radius:var(--radius);font-family:Georgia,Times New Roman,serif;font-variant-emoji:text;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.stock{width:var(--card-w);position:relative;border:1px solid #ffffff30}.stock small{position:absolute;bottom:.35rem;left:0;right:0;text-align:center;font:600 clamp(.55rem,.7cqw,.75rem) system-ui,sans-serif;color:#eaf6f2;text-shadow:0 1px 2px #000a}.stock[aria-disabled=true]{opacity:.55}.slot{display:flex;align-items:center;justify-content:center;color:#ffffff4d;background:#00000026;border:2px solid #ffffff2e;box-shadow:inset 0 2px 8px #00000038;font-size:calc(var(--card-w) * .42);line-height:1}.slot:hover{border-color:#ffffff59;color:#ffffff80}.card{position:relative;display:block;text-align:left;overflow:hidden;border:1px solid #00000038;background:linear-gradient(163deg,#fff,#fdfdfb 55%,#f0f1ee);color:#16181c;box-shadow:0 1px 1px #ffffffc4 inset,0 2px 4px #00000059,0 8px 14px #0000002e}.card-face{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.card.red{color:#c8102e}.card.selected{background:linear-gradient(163deg,#fff6cf,#ffe9a4);outline:3px solid #ffd049;outline-offset:-3px;box-shadow:0 0 0 1px #00000038,0 0 18px #ffd04988,0 6px 12px #00000047}.card.suggested{outline:3px solid #6cf0b6;outline-offset:-3px;box-shadow:0 0 18px #6cf0b699,0 4px 10px #0000004d}.card:focus-visible,.slot:focus-visible,.stock:focus-visible{outline:3px solid #ffd049;outline-offset:2px}.back,.card.back{border:calc(var(--card-w) * .055) solid #fdfdfb;background-color:#17418f;background-image:repeating-linear-gradient(45deg,#fff0 0 calc(var(--card-w) * .075),#ffffff29 calc(var(--card-w) * .075) calc(var(--card-w) * .15)),repeating-linear-gradient(-45deg,#fff0 0 calc(var(--card-w) * .075),#ffffff1f calc(var(--card-w) * .075) calc(var(--card-w) * .15)),radial-gradient(ellipse at 50% 40%,#3f7fd8,#17418f 70%);color:#cfe0ff;text-align:center;font-size:calc(var(--card-w) * .3);box-shadow:0 0 0 1px #00000047,0 2px 4px #00000059,0 8px 14px #0000002e}.card.back{cursor:default;opacity:1}.card.back>span{display:none}.stock-note,.charge-count{margin:1.6rem 0 0;color:#e7eadf;font-size:.75rem;line-height:1.6}.stock-note span,.charge-count span{font-size:.65rem;color:#bacac0}.charge-count{font-size:1.15rem;color:#ffc16b;white-space:nowrap}.ember-reserves{display:grid;gap:8px}body[data-variant=ember] .top-row{gap:var(--gap)}body[data-variant=ember] .charge-count{margin:0;font-size:13px}body[data-variant=ember] .charge-count span{display:inline;max-width:none;color:#ffc16b;font-size:16px}body[data-variant=ember] #table.fit .charge-count{white-space:normal;font-size:10px}.runs{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:1.1rem}.run{border:1px dashed #ffffff4d;border-radius:.3rem;padding:.5rem;color:#d7cbf5;font-size:.65rem;text-align:center}.run.done{background:#b7a1f5;color:#221e37;border-style:solid}.table-scroll{overflow-x:auto;padding:4px 3px 12px;margin:-4px -3px -12px;overscroll-behavior-x:contain}#board{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,var(--card-w)));justify-content:space-between;gap:var(--gap);min-height:calc(var(--card-h) + (var(--rows) - 1) * var(--step))}.toolbar [hidden]{display:none}.drag-ghost{--card-w: calc(var(--ghost-h) / 1.45);--radius: clamp(4px, calc(var(--ghost-h) / 1.45 * .075), 10px);position:fixed;z-index:100;pointer-events:none;opacity:.95;transform:rotate(-3deg);filter:drop-shadow(0 12px 18px #00000080)}.drag-ghost .card{position:absolute;left:0;width:100%;height:var(--ghost-h);top:calc(var(--index) * var(--ghost-step))}body[data-variant=spider] #board,body[data-variant=spider] #table.fit #board{min-width:0}.column{position:relative;min-height:var(--card-h)}.column>.card{position:absolute;top:calc(var(--index) * var(--step))}.column>.card:not(.back):hover{filter:brightness(1.05);transform:translateY(-2px)}.card,.column>.card{transition:transform .12s ease,box-shadow .12s ease}.card.moving{z-index:40;box-shadow:0 6px 10px #00000059,0 18px 26px #00000038}.column.moving,.single-pile.moving{z-index:30}.cascade{--radius: clamp(4px, calc(var(--card-w) * .075), 10px);position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none}.cascade .falling{position:absolute;left:0;top:0;width:var(--card-w);height:calc(var(--card-w) * 1.45);will-change:transform}.target-hint{outline:3px dashed #6cf0b6;outline-offset:3px;border-radius:var(--radius)}#win{padding:1.1rem;text-align:center;background:linear-gradient(#1c4c37,#123425);border:1px solid var(--bw-accent);border-radius:.8rem;margin-bottom:1rem}#win[hidden]{display:none}#win p{margin:0 0 .6rem;font-size:1.15rem}#win button{font:inherit;background:var(--bw-accent-2);border:0;border-radius:.5rem;padding:.7rem 1rem;cursor:pointer}.game-rules{margin-top:1.25rem;font-size:.85rem;line-height:1.7;color:var(--bw-text-muted)}.game-rules summary{cursor:pointer;color:var(--bw-text);font-weight:700}.game-rules ul{padding-left:1.2rem}#saved{font-size:.72rem;color:var(--bw-text-muted)}dialog{max-width:min(28rem,calc(100vw - 2rem));background:var(--bw-panel);color:var(--bw-text);border:1px solid var(--bw-border-strong);border-radius:.8rem;padding:1.3rem}dialog::backdrop{background:#0009}dialog p{line-height:1.5}dialog .buttons{display:flex;justify-content:flex-end;gap:.6rem}@media(max-width:600px){.card-shell{padding:1rem .5rem}#table{--card-max: 84px;border-radius:.8rem}body[data-variant=spider] #table{--card-max: 62px}.top-row{gap:.4rem}.pile-label{font-size:.45rem}.counters{width:100%;margin:.2rem 0 0}.charge-count{font-size:.8rem;margin-top:1rem}.charge-count span{display:block;max-width:3rem;white-space:normal}.stock-note{max-width:6rem;margin-top:1rem}}@media(prefers-reduced-motion:reduce){.card,.column>.card{transition:none}.column>.card:not(.back):hover{transform:none}}body[data-variant] .table-scroll{max-width:100%;padding:0 0 12px;margin:0;border-radius:14px;scrollbar-color:#7caaa0 #102b2a;scrollbar-width:auto}body[data-variant] #table{--table-border: 1px;--card-max: 184px;--pad: 14px;--gap: 10px;--felt: #174f43;--felt-light: #246557;--felt-dark: #10392f;background:radial-gradient(ellipse at 50% 0%,#ffffff0d,transparent 65%),var(--felt);border:1px solid #477367;box-shadow:inset 0 1px #ffffff1a}body[data-variant=spider] #table{--felt: #343b58;--card-max: 132px}body[data-variant=ember] #table{--felt: #574136;--card-max: 160px}body[data-variant] #table.fit{--card-w: max(20px, min(var(--fill-w), var(--card-max)));--step: calc(var(--card-h) * .29)}body[data-variant] #table.fit .top-row{flex-wrap:nowrap}body[data-variant] .card{border-color:#c9d1cd;background:#fffefb;box-shadow:0 1px 2px #0005,0 4px 8px #0003}body[data-variant] .card.black{color:#142330}body[data-variant] .card.red{color:#be163b}body[data-variant] .card.selected{background:#fff1c3;outline:3px solid #ffd46b}body[data-variant] .back{background-color:#173e64;background-image:repeating-linear-gradient(45deg,transparent 0 5px,#ffffff0c 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,#ffffff0c 5px 6px);border-width:5px;box-shadow:inset 0 0 0 1px #a1c9e7,0 2px 5px #0004}body[data-variant] .pile-label{font-size:10px;letter-spacing:.04em}body[data-variant] .stock small{font-size:13px}body[data-variant] .top-row{margin-bottom:24px}body[data-variant] .card-navigation{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 6px}body[data-variant] #columnLinks{display:flex;flex:1;gap:4px;justify-content:flex-end}body[data-variant] #columnLinks button{flex:1;max-width:48px;min-width:24px;min-height:44px;padding:0;font:600 13px system-ui,sans-serif}body[data-variant] .table-help{margin:8px 0 12px;color:#b4cbd5;font-size:12px;line-height:1.6}body[data-variant] .table-scroll:focus-visible{outline:2px solid #a1defc;outline-offset:3px}body[data-variant] #table.fit .pile-label{font-size:clamp(6px,.7cqw,10px)}@media(max-width:600px){body[data-variant].game-focused .bw-back{display:none}body[data-variant].game-focused .bw-game-table #message{margin:6px 0;padding:5px 8px}body[data-variant].game-focused .bw-game-stats{margin:8px 0}body[data-variant] #table{--card-w: 96px;--pad: 12px;--gap: 8px}body[data-variant] #table.fit{--pad: 5px;--gap: 3px}body[data-variant] #columnLinks{flex-basis:100%;justify-content:space-between}body[data-variant] .card-navigation .bw-btn{min-height:44px}body[data-variant] .bw-game-table-header{gap:6px}body[data-variant] .bw-game-tools{gap:4px}body[data-variant] .stock-note{max-width:180px}body[data-variant] #table.fit .stock-note{max-width:80px;font-size:10px}}body[data-variant] .card.selected:after{content:"";position:absolute;inset:0;background:#ffd04926;pointer-events:none}
