.deck-hub{--hub-bg:#101823;--hub-panel:#182331;--hub-text:#edf2f7;--hub-muted:#a0b2c5;--hub-line:#40556c;--hub-accent:#bfdc4b;background:var(--hub-bg);color:var(--hub-text)}html[data-theme=light] .deck-hub{--hub-bg:#eef2f6;--hub-panel:#fff;--hub-text:#23364a;--hub-muted:#546b82;--hub-line:#bdcbd8;--hub-accent:#bfdc4b}.hub-shell{max-width:1600px;margin:0 auto;padding:40px 32px}.hub-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.eyebrow{letter-spacing:.16em;font-size:11px;font-weight:700;color:var(--hub-muted);margin:0 0 8px}.hub-heading h1{font-size:32px;margin:0 0 10px}.hub-heading h1 span{font-size:17px;color:var(--hub-muted);margin-left:8px}.hub-heading p:not(.eyebrow),.hub-footnote{color:var(--hub-muted);font-size:13px}.deck-hub button,.deck-hub input,.deck-hub select{font:inherit;border-radius:7px;border:1px solid var(--hub-line);color:var(--hub-text);background:var(--hub-panel);box-sizing:border-box}.deck-hub button{cursor:pointer;padding:10px 13px}.deck-hub button:hover{border-color:#819aae}.deck-hub .accent{background:var(--hub-accent);border-color:var(--hub-accent);color:#233009;font-weight:700}.hub-tools{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.hub-tools a{margin-left:auto;font-size:13px;color:var(--hub-muted)}.hub-tools select{padding:9px}.hub-search{display:flex;align-items:center;gap:10px;border:1px solid var(--hub-line);border-radius:8px;padding:0 12px;background:var(--hub-panel)}.hub-search input{border:0;background:none;padding:11px 0;width:240px}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.deck-tile{border:1px solid var(--hub-line);background:var(--hub-panel);border-radius:12px;overflow:hidden;transition:transform .16s,border-color .16s}.deck-tile:hover{transform:translateY(-3px);border-color:#93ab4d}.deck-open{display:block;color:inherit;text-decoration:none;padding:16px 16px 12px;position:relative;background:radial-gradient(ellipse at 50% 45%,#7894b31c,transparent 70%)}.deck-format{font-size:9px;letter-spacing:.12em;color:var(--hub-muted);display:block;text-align:right}.deck-open h2{font-size:17px;margin:8px 0 5px;text-align:center;overflow-wrap:anywhere;color:var(--hub-text)}.deck-open p{text-align:center;font-size:12px;color:var(--hub-muted);margin:0}.deck-tile-bottom{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:11px 12px;border-top:1px solid var(--hub-line);font-size:11px;color:var(--hub-muted)}.deck-tile-bottom button{font-size:11px;padding:7px 9px}.deck-visual{position:relative;width:210px;height:220px;margin:auto}.case-object{position:absolute;width:180px;height:180px;left:15px;bottom:0;isolation:isolate}.case-base{width:100%;height:100%;object-fit:contain}.case-tint{position:absolute;inset:0;background:var(--case-color);mask:url(images/deck-cases/mockup-silver.png) center/contain no-repeat;mix-blend-mode:color;pointer-events:none}.case-art{position:absolute;left:30%;top:29%;width:50%;height:60%;object-fit:cover;transform:skewY(-5deg);border-radius:5px;opacity:.93;mix-blend-mode:multiply}.case-template{width:100%;height:100%;object-fit:contain}.representative-fan{position:absolute;inset:0;pointer-events:none}.representative-fan img{position:absolute;width:69px;height:100px;object-fit:contain;left:calc(70px + (var(--slot) - (var(--count) - 1)/2)*38px);top:calc(4px + abs(var(--slot) - (var(--count) - 1)/2)*12px);transform:rotate(calc((var(--slot) - (var(--count) - 1)/2)*18deg));filter:drop-shadow(0 3px 4px #0008);z-index:calc(5 - abs(var(--slot) - (var(--count) - 1)/2))}.hub-footnote{margin-top:28px}#hubState:empty{display:none}#hubState{font-size:14px;padding:20px 0}.deck-hub dialog{width:min(920px,calc(100vw - 32px));max-height:90dvh;border:1px solid var(--hub-line);border-radius:16px;background:var(--hub-panel);color:var(--hub-text);padding:0;box-shadow:0 24px 90px #0007}.deck-hub dialog::backdrop{background:#070e18a8;backdrop-filter:blur(4px)}.deck-hub dialog header{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--hub-line)}.deck-hub dialog h2{margin:0;font-size:22px}.settings-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;padding:24px}.settings-body aside{text-align:center}.case-preview{border:1px solid var(--hub-line);border-radius:12px;padding:20px 0;background:radial-gradient(ellipse,#8ea5c02b,transparent)}#previewName{font-weight:700;overflow-wrap:anywhere}.muted{font-size:12px;color:var(--hub-muted);line-height:1.5}.field{display:grid;gap:7px;font-size:13px}.field input{width:100%;padding:10px}.deck-hub fieldset{border:0;padding:0;margin:22px 0 0;min-width:0}.deck-hub legend{font-size:14px;font-weight:700;margin-bottom:12px}.deck-hub legend span{font-size:12px;color:var(--hub-muted);margin-left:6px}.case-modes{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}.case-modes label{display:flex;gap:5px;align-items:center}.color-picker{display:flex;gap:10px;align-items:center;margin:14px 0;font-size:13px}.color-picker input{height:32px;width:48px;padding:2px}.color-swatches{display:flex;gap:8px}.color-swatches button{background:var(--swatch);width:28px;height:28px;padding:0;border-radius:50%;border:2px solid #ffffff70}.rep-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:14px}.rep-slots button{position:relative;min-width:0;display:flex;align-items:center;gap:6px;padding:7px}.rep-slots img{width:25px;height:36px;object-fit:contain}.rep-slots span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rep-slots b{font-size:13px}.empty-slot{display:flex;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--hub-line);height:50px;color:var(--hub-muted);border-radius:7px}.empty-slot small{font-size:10px}.rep-candidates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;max-height:245px;overflow:auto;margin-top:12px;padding:3px}.rep-candidates button{padding:5px;min-width:0}.rep-candidates img{width:100%;aspect-ratio:704/1024;object-fit:contain}.rep-candidates span{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.deck-hub button[aria-pressed=true]{border:2px solid #9bb82f;background:#7fa02518}.template-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:15px}.template-grid button{padding:5px;min-width:0}.template-grid img{width:100%;height:74px;object-fit:contain}.template-grid span{font-size:10px}.deck-hub [hidden]{display:none!important}.deck-hub dialog footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--hub-line);position:sticky;bottom:0;background:var(--hub-panel)}#settingsError{margin:0 24px 16px;color:#cf5361;font-size:13px}#settingsError:empty{display:none}.deck-hub :focus-visible{outline:3px solid #769aca;outline-offset:3px}@media(max-width:680px){.hub-shell{padding:24px 14px}.hub-heading{align-items:flex-start}.hub-heading h1{font-size:26px}.hub-heading>button{white-space:nowrap;font-size:12px}.hub-tools a{margin-left:0}.hub-search{flex:1}.hub-search input{width:100%}.deck-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.deck-visual{width:160px;height:185px;transform:scale(.85);transform-origin:center bottom;margin-left:calc((100% - 160px)/2)}.case-object{left:-10px}.representative-fan{left:-25px}.deck-open{padding:10px 6px}.deck-open h2{font-size:14px}.deck-tile-bottom{flex-wrap:wrap;gap:6px}.settings-body{grid-template-columns:1fr;padding:16px}.case-preview{max-width:230px;margin:auto}.settings-body aside .muted{display:none}.settings-body aside{display:none}.rep-candidates{grid-template-columns:repeat(4,1fr)}.deck-hub dialog header{padding:16px}.hub-tools{gap:10px}.hub-tools select{max-width:125px}}
/* One settings form and card picker across all viewport sizes. */
.deck-hub .case-art{opacity:1;mix-blend-mode:normal;filter:brightness(.96);z-index:1}
.deck-name-row{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;min-height:42px}
.deck-name-row h2{font-size:17px;color:var(--hub-text);margin:0;overflow-wrap:anywhere;text-align:center}
.deck-name-row>button{padding:7px;flex:0 0 34px;height:34px;border:0;background:transparent;display:grid;place-items:center}
.deck-count{text-align:center;font-size:12px;color:var(--hub-muted);margin:2px 0 14px}
.rename-form{width:100%;display:grid;gap:6px}.rename-form input{width:100%;padding:8px;min-width:0}.rename-form>div{display:flex;justify-content:center;gap:6px}.rename-form button{font-size:12px;padding:6px 10px}.rename-form small{color:#d65263;overflow-wrap:anywhere}
.deck-hub .settings-body label{width:auto;white-space:normal;word-break:keep-all}
.deck-hub .settings-body .field{display:grid;gap:8px}.format-field{margin-top:14px}.field select{padding:10px;width:100%}
.deck-hub #colorPanel{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.deck-hub .color-picker{display:flex;align-items:center;gap:10px;margin:0;flex:none}.color-swatches{flex-wrap:wrap}
.deck-hub .case-art-pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px;min-height:72px}.case-art-pick img{width:56px;height:56px;object-fit:cover;border-radius:5px;flex-shrink:0}.case-art-pick>span{min-width:0}.case-art-pick b,.case-art-pick small{display:block;overflow-wrap:anywhere}.case-art-pick b{font-size:13px}.case-art-pick small{font-size:11px;color:var(--hub-muted);margin-top:5px}.deck-hub .text-button{font-size:12px;padding:6px 0;border:0;background:none;text-decoration:underline;margin-top:5px}
.deck-hub .rep-slots{gap:10px;margin:0}.rep-slot{position:relative;min-width:0}.deck-hub .rep-slot>button[data-slot]{width:100%;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:10px 5px;border-style:dashed}.rep-slot button img{width:50px;height:73px;object-fit:contain}.rep-slot button span{font-size:11px;white-space:normal;overflow-wrap:anywhere;text-align:center}.rep-slot button small{font-size:10px;color:var(--hub-muted)}.deck-hub .rep-slot .slot-remove{position:absolute;right:3px;top:3px;width:26px;height:26px;min-height:0;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--hub-panel)}.deck-hub .slot-plus{font-size:28px;color:var(--hub-muted)}
#cardPicker{width:min(680px,calc(100vw - 24px));max-height:85dvh}.picker-body{padding:18px}.deck-hub #cardPicker .rep-candidates{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));max-height:50dvh}.deck-hub #cardPicker .rep-candidates button{min-width:0}.deck-hub #cardPicker h2{font-size:18px}
@media(max-width:680px){.settings-body{gap:16px}.settings-body aside{display:block}.case-preview{padding:0;max-width:210px}.settings-body aside #previewName{margin:6px 0 0}.settings-body aside .deck-visual{height:160px}.deck-name-row h2{font-size:14px}.deck-name-row{padding:0 6px;gap:2px}.deck-name-row>button{flex-basis:30px;width:30px}.deck-hub dialog{max-height:94dvh}.deck-hub .rep-slot>button[data-slot]{min-height:140px}.deck-hub dialog footer{padding:12px 16px}.deck-hub dialog h2{font-size:20px}}
.deck-hub .settings-body .color-picker{white-space:nowrap!important;width:auto!important;min-width:112px;flex:0 0 auto}.deck-hub .settings-body .color-picker input{flex:0 0 48px}