@font-face{font-family:Pixelify;src:url(assets/fonts/PixelifySans.ttf)}
@font-face{font-family:Silk;src:url(assets/fonts/Silkscreen.ttf)}
:root{--bone:#d8d2c0;--plate:#14161b;--plate2:#1c1f26;--steel:#3a3e46;--steel2:#5a5f69;--amber:#d89a3a;--blood:#c0301e;--acc:#d89a3a;--green:#6fcf4a;--red:#d8493a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:Pixelify,monospace;color:var(--bone);user-select:none}
#stage{position:absolute;left:50%;top:50%;width:960px;height:540px;transform-origin:center;background:#05060f}
#cv{position:absolute;inset:0;width:960px;height:540px;image-rendering:pixelated}
#ui{position:absolute;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;pointer-events:auto;background:radial-gradient(ellipse at center,rgba(6,5,7,.55) 0%,rgba(4,3,5,.86) 100%);display:flex;flex-direction:column;align-items:center;padding:18px 24px;overflow:auto}
.screen.clear{background:rgba(5,4,6,.6)}
h1{font-family:Silk;font-size:34px;margin:6px 0;letter-spacing:3px;color:var(--acc);text-shadow:3px 3px 0 #000}
h2{font-family:Silk;font-size:20px;margin:6px 0 10px;letter-spacing:2px;color:var(--acc);text-shadow:2px 2px 0 #000}
h3{margin:0 0 4px;font-size:18px;color:#f0eadb}
p{margin:4px 0;font-size:14px;line-height:1.3}
.dim{opacity:.6}.sm{font-size:12px}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%}
/* riveted metal plates */
.btn,.card{--r:radial-gradient(circle,#7a7f89 0 1.5px,transparent 2px)}
.btn{font-family:Silk;font-size:13px;letter-spacing:1px;background:#262a31;color:var(--bone);border:3px solid var(--steel2);border-bottom-color:#25282e;border-right-color:#25282e;padding:9px 16px;cursor:pointer;margin:4px;box-shadow:3px 3px 0 #000}
.btn:hover:not(:disabled){background:var(--amber);color:#000;border-color:#f0c070}
.btn:disabled{opacity:.3;cursor:default}
.btn.big{font-size:17px;padding:12px 28px}
.btn.red{background:#3a1410;border-color:#8a2a1e}.btn.red:hover:not(:disabled){background:var(--blood);color:#fff}
.btn.sel{background:var(--acc);color:#000;border-color:#fff3}
input{font-family:Pixelify;font-size:16px;background:#0b0c0f;color:var(--bone);border:3px solid var(--steel);padding:8px;margin:4px;width:230px;text-align:center}
.card{background:linear-gradient(#1b1e25,#12141a);border:4px solid var(--steel);border-top:4px solid var(--c,var(--steel2));padding:12px;width:210px;min-height:150px;cursor:pointer;position:relative;box-shadow:inset 0 0 0 2px #090a0d,4px 4px 0 #000;
 background-image:var(--r),var(--r),var(--r),var(--r),linear-gradient(#1b1e25,#12141a);background-position:4px 4px,calc(100% - 4px) 4px,4px calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),0 0;background-size:6px 6px,6px 6px,6px 6px,6px 6px,100% 100%;background-repeat:no-repeat}
.card:hover{transform:translate(0,-3px);filter:brightness(1.2)}
.card.locked{opacity:.55}.card.nopick{cursor:default}.card.nopick:hover{transform:none;filter:none}
.card .tag{display:inline-block;font-size:11px;padding:1px 6px;margin:2px 3px 2px 0;border:1px solid currentColor;opacity:.85}
.rar-common{--c:#9aa3ad}.rar-rare{--c:#4a8fd8}.rar-epic{--c:#a45ae0}.rar-legendary{--c:#e8b830}
.pro{color:var(--green)}.con{color:var(--red)}
.tabs{display:flex;gap:6px;margin:4px 0 10px}
.err{color:var(--red);min-height:18px;font-size:13px}
.slot{width:270px;min-height:200px}
table{border-collapse:collapse}td{padding:2px 8px;font-size:13px}
body.fight #cv{cursor:none}
.screen.scene{background:radial-gradient(ellipse at center,rgba(6,5,7,.08) 0%,rgba(4,3,5,.62) 100%)}