root {
    flex-grow:1; width:100%; height:100%;
    pointer-events:none; position:relative;
    overflow:visible;
}

.mini-hand {
    position:absolute;
    bottom:15px;
    left:0; right:0px;           /* right edge = sidebar width */
    display:flex; flex-direction:row; gap:14px; align-items:flex-end;
    justify-content:center;        /* centers within the grid area, not full viewport */
    pointer-events:all;
    z-index:30;
}

.mini-card {
    width:80px;
    height: 80px;
    background-color:rgba(31,27,83,0.85);   /* more opaque — was barely visible */
    border:2px solid rgba(255,255,255,0.18);
    border-radius:16px; padding:16px 10px 12px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    cursor:pointer; position:relative;
    transition:background-color 0.1s, border-color 0.1s, transform 0.1s;
}
.mini-card:hover  { background-color:rgba(117,110,194,0.75); transform:translateY(-5px); }
.mini-card.active {
    background-color:rgba(83,74,183,0.90);
    border-color:#a78bfa;
    border-width:3px;
    transform:translateY(-16px);
}
.mini-card.used {
    background-color:rgba(29,158,117,0.28);
    border-color:rgba(29,158,117,0.60);
    opacity:0.75;
    cursor:default;
}

.mini-icon { font-size:30px; position: relative; bottom: 4px;}     /* was 40px — easier to see */
.mini-name { font-size:13px; font-weight:800; color:rgba(255,255,255,0.80); }
.mini-card.active .mini-name { color:#fff; font-size:15px; }

.mini-badge {
    position:absolute; top:5px; right:7px;
    font-size:12px; font-weight:700;
    color:rgba(80,220,140,0.95);
    background-color:rgba(29,158,117,0.40);
    border-radius:4px; padding:0 5px;
}

.kb-hint {
    position:absolute; top:5px; left:7px;
    font-size:12px; font-weight:800;
    color:rgba(255,255,255,0.45);
    background-color:rgba(255,255,255,0.10);
    border-radius:4px; padding:0 6px;
}
.mini-card.active .kb-hint {
    color:rgba(255,255,255,0.80);
    background-color:rgba(255,255,255,0.18);
}

.mini-det-wrap { align-self:flex-end; }
.mini-det {
    width:90px;                    /* was 90px */
    background:linear-gradient(135deg,#7c3aed,#a855f7);
    border:2px solid rgba(167,139,250,0.40);
    border-radius:14px; 
    padding:12px 10px 5px;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    cursor:pointer;
    transition:opacity 0.15s;
}
.mini-det-wrap.ready .mini-det { border-color:#a78bfa; }
.mini-det-wrap.off   .mini-det { opacity:0.25; pointer-events:none; }
.mini-det-icon  { font-size:28px; }
.mini-det-label { font-size:13px; font-weight:800; color:#fff; letter-spacing:0.08em; }

/* SCREEN SHAKE */
.mini-hand.shake-small  { animation: shake-small  0.25s ease-out; }
.mini-hand.shake-medium { animation: shake-medium 0.35s ease-out; }
.mini-hand.shake-strong { animation: shake-strong 0.45s ease-out; }
.mini-hand.shake-insane { animation: shake-insane 0.55s ease-out; }

@keyframes shake-small {
    0%,100% { transform: translate(0,0); }
    25%     { transform: translate(-2px, 1px); }
    50%     { transform: translate(2px, -1px); }
    75%     { transform: translate(-1px, 2px); }
}
@keyframes shake-medium {
    0%,100% { transform: translate(0,0); }
    20%     { transform: translate(-4px, 2px) rotate(-0.3deg); }
    40%     { transform: translate(4px,-3px) rotate(0.3deg); }
    60%     { transform: translate(-3px, 3px) rotate(-0.2deg); }
    80%     { transform: translate(3px,-2px) rotate(0.2deg); }
}
@keyframes shake-strong {
    0%,100% { transform: translate(0,0); }
    15%     { transform: translate(-6px, 3px) rotate(-0.5deg); }
    30%     { transform: translate(6px,-4px) rotate(0.5deg); }
    45%     { transform: translate(-5px, 5px) rotate(-0.4deg); }
    60%     { transform: translate(5px,-4px) rotate(0.4deg); }
    75%     { transform: translate(-3px, 2px); }
    90%     { transform: translate(2px,-2px); }
}
@keyframes shake-insane {
    0%,100% { transform: translate(0,0); }
    10%     { transform: translate(-9px, 5px) rotate(-0.7deg); }
    20%     { transform: translate(9px,-6px) rotate(0.7deg); }
    30%     { transform: translate(-8px, 7px) rotate(-0.6deg); }
    40%     { transform: translate(8px,-6px) rotate(0.6deg); }
    50%     { transform: translate(-6px, 5px) rotate(-0.4deg); }
    60%     { transform: translate(6px,-5px) rotate(0.4deg); }
    70%     { transform: translate(-4px, 3px); }
    80%     { transform: translate(3px,-3px); }
    90%     { transform: translate(-1px, 1px); }
}

/* Lock icon, if random event Bomb jam hit */
.mini-jam-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(239,68,68,0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    pointer-events: none;
}