/* =====================================================================
   MCUniverse — HUD Border & Tier System CSS
   Import this after style.css:
     <link rel="stylesheet" href="/assets/css/hud.css">
   ===================================================================== */

/* ── Tier CSS variables ─────────────────────────────────────────────── */
:root {
    --tier-stone-color:     #2a2a2a;
    --tier-iron-color:      #ff8c42;
    --tier-diamond-color:   #00fff7;
    --tier-netherite-color: #d946ef;

    --tier-stone-glow:      none;
    --tier-iron-glow:       0 0 10px rgba(255,140,66,0.18);
    --tier-diamond-glow:    0 0 14px rgba(0,255,247,0.22), inset 0 0 8px rgba(0,255,247,0.04);
    --tier-netherite-glow:  0 0 20px rgba(217,70,239,0.28), inset 0 0 10px rgba(217,70,239,0.05);
}

/* ── HUD card base ──────────────────────────────────────────────────── */
.hud-card {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hud-card:hover { transform: translateY(-3px); }

/* Corner bracket pseudo-elements (TL via ::before, inherit rest via spans) */
.hud-card::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 22px; height: 22px;
    border-top:  2px solid var(--hud-color, #2a2a2a);
    border-left: 2px solid var(--hud-color, #2a2a2a);
    z-index: 4;
    pointer-events: none;
}

.hud-card .hud-tr { position:absolute; top:4px;    right:4px;  width:22px; height:22px; border-top:2px solid var(--hud-color,#2a2a2a);    border-right:2px solid var(--hud-color,#2a2a2a);   z-index:4; pointer-events:none; }
.hud-card .hud-bl { position:absolute; bottom:4px; left:4px;   width:22px; height:22px; border-bottom:2px solid var(--hud-color,#2a2a2a); border-left:2px solid var(--hud-color,#2a2a2a);    z-index:4; pointer-events:none; }
.hud-card .hud-br { position:absolute; bottom:4px; right:4px;  width:22px; height:22px; border-bottom:2px solid var(--hud-color,#2a2a2a); border-right:2px solid var(--hud-color,#2a2a2a);   z-index:4; pointer-events:none; }

/* Inner double-line (offset inner bracket, lower opacity) */
.hud-card .hud-tl2 { position:absolute; top:8px;    left:8px;   width:14px; height:14px; border-top:1px solid var(--hud-color,#2a2a2a);    border-left:1px solid var(--hud-color,#2a2a2a);    opacity:.4; z-index:4; pointer-events:none; }
.hud-card .hud-tr2 { position:absolute; top:8px;    right:8px;  width:14px; height:14px; border-top:1px solid var(--hud-color,#2a2a2a);    border-right:1px solid var(--hud-color,#2a2a2a);   opacity:.4; z-index:4; pointer-events:none; }
.hud-card .hud-bl2 { position:absolute; bottom:8px; left:8px;   width:14px; height:14px; border-bottom:1px solid var(--hud-color,#2a2a2a); border-left:1px solid var(--hud-color,#2a2a2a);    opacity:.4; z-index:4; pointer-events:none; }
.hud-card .hud-br2 { position:absolute; bottom:8px; right:8px;  width:14px; height:14px; border-bottom:1px solid var(--hud-color,#2a2a2a); border-right:1px solid var(--hud-color,#2a2a2a);   opacity:.4; z-index:4; pointer-events:none; }

/* Corner notch diamonds */
.hud-card .hud-notch { position:absolute; width:5px; height:5px; background:var(--hud-color,#2a2a2a); transform:rotate(45deg); z-index:5; pointer-events:none; opacity:.7; }
.hud-card .n-tl { top:2px;    left:20px;  }
.hud-card .n-tr { top:2px;    right:20px; }
.hud-card .n-bl { bottom:2px; left:20px;  }
.hud-card .n-br { bottom:2px; right:20px; }

/* Center edge tick marks */
.hud-card .hud-tick  { position:absolute; background:var(--hud-color,#2a2a2a); z-index:4; pointer-events:none; opacity:.35; }
.hud-card .tick-t    { top:4px;    left:50%; transform:translateX(-50%); width:12px; height:1px; }
.hud-card .tick-b    { bottom:4px; left:50%; transform:translateX(-50%); width:12px; height:1px; }
.hud-card .tick-l    { left:4px;   top:50%;  transform:translateY(-50%); width:1px;  height:12px; }
.hud-card .tick-r    { right:4px;  top:50%;  transform:translateY(-50%); width:1px;  height:12px; }

/* ── Tier glow states ────────────────────────────────────────────────── */
.hud-card.tier-stone     { box-shadow: none; border: 1px solid #1a1a1a; }
.hud-card.tier-iron      { box-shadow: var(--tier-iron-glow);      border: 1px solid rgba(255,140,66,0.12); }
.hud-card.tier-diamond   { box-shadow: var(--tier-diamond-glow);   border: 1px solid rgba(0,255,247,0.1);   }
.hud-card.tier-netherite { box-shadow: var(--tier-netherite-glow); border: 1px solid rgba(217,70,239,0.15); }

.hud-card:hover.tier-iron      { box-shadow: 0 0 20px rgba(255,140,66,0.32); }
.hud-card:hover.tier-diamond   { box-shadow: 0 0 24px rgba(0,255,247,0.38); }
.hud-card:hover.tier-netherite { box-shadow: 0 0 32px rgba(217,70,239,0.48); }

/* ── Tier color helpers (used in text, badges, etc.) ───────────────── */
.text-tier-stone     { color: #888; }
.text-tier-iron      { color: var(--tier-iron-color); }
.text-tier-diamond   { color: var(--tier-diamond-color); }
.text-tier-netherite { color: var(--tier-netherite-color); }

/* ── Tier badge pill ─────────────────────────────────────────────────── */
.tier-badge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
}
.tier-badge-pill.tier-stone     { background: rgba(255,255,255,0.04); color: #888;    border: 1px solid #2a2a2a; }
.tier-badge-pill.tier-iron      { background: rgba(255,140,66,0.1);   color: #ff8c42; border: 1px solid rgba(255,140,66,0.3); }
.tier-badge-pill.tier-diamond   { background: rgba(0,255,247,0.07);   color: #00fff7; border: 1px solid rgba(0,255,247,0.3); }
.tier-badge-pill.tier-netherite { background: rgba(217,70,239,0.1);   color: #d946ef; border: 1px solid rgba(217,70,239,0.4); }

/* ── Rotation progress dots ─────────────────────────────────────────── */
.rot-bar   { display:flex; align-items:center; gap:8px; }
.rot-dots  { display:flex; gap:4px; align-items:center; }
.rot-dot   { height:2px; border-radius:1px; background:#2a2a2a; transition:all 0.4s ease; width:6px; }
.rot-dot.active { background:#ff6b35; width:20px; }
.rot-label { font-family:'Share Tech Mono',monospace; font-size:0.65rem; color:#333; text-transform:uppercase; letter-spacing:2px; }
.rot-countdown { font-family:'Share Tech Mono',monospace; font-size:0.65rem; color:#ff6b35; margin-left:auto; opacity:.6; }