:root{--bg:#0d1117;--bg-panel:#161b22;--text:#c9d1d9;--text-muted:#8b949e;--border:#30363d;--primary:#58a6ff;--miner:#00008B;--normal:#0000FF;--spell:#800080;--enchant:#FF0000;--general:#FFD700;--mythic:#FFC0CB;--order:#008000;--chaos:#BA55D3;--dead:#FF69B4;--light:#ADD8E6;--heavy:#FFA500;--giant:#DAA520;--general-tag:#808080}*{box-sizing:border-box;user-select:none;-webkit-user-select:none}body{font-family:'Segoe UI',Tahoma,sans-serif;background-color:var(--bg);color:var(--text);margin:0;padding:0;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--border)}.tabs{display:flex;gap:10px;margin-bottom:20px}.tab-btn{padding:10px 20px;background:var(--bg-panel);border:1px solid var(--border);color:var(--text);border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s}.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.content-section{display:none;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:20px;animation:fade .3s ease}.content-section.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}.deck-display{min-height:220px;border:2px dashed var(--border);border-radius:12px;padding:15px;margin-bottom:20px;display:flex;gap:10px;overflow-y:visible}.deck-info{margin-bottom:15px;font-weight:700;color:var(--primary)}@media(min-width:769px){.deck-display{flex-wrap:nowrap;overflow-x:auto}}@media(max-width:768px){.deck-display{flex-wrap:wrap;justify-content:center}}.card{position:relative;width:120px;height:180px;border-radius:8px;border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:5px;cursor:pointer;overflow:hidden;flex-shrink:0;background-color:#111;transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.6)}.card-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.45;z-index:1;pointer-events:none}.card-name{position:relative;z-index:2;font-size:12px;font-weight:700;text-align:center;color:#fff;text-shadow:1px 1px 2px #000;margin-bottom:5px;width:100%;word-wrap:break-word;pointer-events:none}.card-tags{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:2px;justify-content:center;width:100%;pointer-events:none}.tag{font-size:9px;padding:2px 4px;border-radius:4px;color:#fff;font-weight:600;text-shadow:1px 1px 1px #000}.btn{padding:8px 16px;background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:.2s}.btn:active{transform:scale(.95)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-danger{background:#da3633}.accordion{background:var(--bg);border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden}.acc-header{padding:12px 15px;background:var(--bg-panel);cursor:pointer;font-weight:600;display:flex;justify-content:space-between;transition:background .2s}.acc-header:hover{background:var(--border)}.acc-body{max-height:0;opacity:0;overflow:hidden;padding:0 15px;display:flex;flex-wrap:wrap;gap:10px;background:var(--bg);transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,padding .4s ease}.acc-body.open{max-height:2500px;opacity:1;padding:15px}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}@media(max-width:768px){.controls-grid{grid-template-columns:1fr}}.control-group{background:var(--bg);padding:15px;border-radius:8px;border:1px solid var(--border)}.control-group h4{margin:0 0 10px 0}.slider-container{display:flex;align-items:center;gap:10px;margin-bottom:10px}.slider-container input[type=range]{flex-grow:1;-webkit-appearance:none;background:0 0}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--primary);cursor:pointer;margin-top:-6px;box-shadow:0 0 5px rgba(0,0,0,.5);transition:transform .2s}.slider-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-container input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;cursor:pointer;background:var(--border);border-radius:3px;transition:background .3s}.slider-container input[type=range]:hover::-webkit-slider-runnable-track{background:#444c56}.radio-group{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}.radio-label{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:14px;transition:color .2s}.radio-label:hover{color:var(--primary)}.slot-machine{display:none;height:200px;background:#000;border:4px solid #d4af37;border-radius:10px;margin:20px 0;overflow:hidden;justify-content:center;align-items:center;gap:10px;padding:10px;box-shadow:0 0 20px rgba(212,175,55,.3)}.slot-col{width:120px;height:180px;background:#222;border-radius:8px;position:relative;overflow:hidden;box-shadow:inset 0 0 15px rgba(0,0,0,.8)}.slot-strip{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column}.slot-item{width:120px;height:180px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-align:center;padding:10px;background-size:cover;background-position:center;text-shadow:1px 1px 3px #000}@keyframes spin{0%{transform:translateY(0)}100%{transform:translateY(calc(-100% + 180px))}}.ban-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px}@media(max-width:768px){.ban-spec-grid{grid-template-columns:1fr}}.mini-card{width:auto;height:auto;padding:5px 10px;border-radius:4px;border:1px solid;cursor:pointer;font-size:12px;font-weight:600;color:#fff;text-shadow:1px 1px 1px #000;display:inline-block;margin:2px;transition:all .2s}.mini-card:hover{transform:scale(1.05);filter:brightness(1.2)}.selected-mini{outline:3px solid #fff;box-shadow:0 0 8px #fff}
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.2;
}
.gif {
    display: flex;
    align-items: center;
    gap: 10px;
}