/* DictionaryBlueprint.css
   NOTE: Replace your existing file with this namespace.
   This file contains the renamed selectors for the reusable dictionary blueprint.
   */

/* Container */
.dictionary-blueprint{
    width:100%;
    max-width:100%;
    margin-top:15px;
    background:linear-gradient(180deg,#3d2b1f 0%,#2b1e15 100%);
    border:4px solid #1a120c;
    border-radius:16px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    box-sizing:border-box;
    box-shadow:inset 0 10px 30px rgba(0,0,0,.5),0 10px 20px rgba(0,0,0,.15);
}

.dictionary-blueprint-header{
    display:flex;
    align-items:center;
    padding:5px 20px 10px;
    border-bottom:2px solid rgba(255,255,255,.1);
}

.dictionary-blueprint-header-key{
    width:35%;
    flex-shrink:0;
    font-size:13px;
    color:#ffcc00;
    font-weight:800;
}

.dictionary-blueprint-header-divider{
    width:4px;
    margin:0 25px;
    flex-shrink:0;
}

.dictionary-blueprint-header-values{
    flex:1;
    color:#a4bdfd;
    font-size:13px;
    font-weight:700;
}

.dictionary-blueprint-row{
    display:flex;
    align-items:stretch;
    background:rgba(255,255,255,.04);
    border-bottom:6px solid #4a3525;
    padding:8px 16px;
}

.dictionary-blueprint-row-active{
    background:rgba(45,91,227,.12);
    border-bottom-color:#2d5be3;
}

.dictionary-blueprint-key{
    width:35%;
    display:flex;
    align-items:center;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    padding:8px 12px;
    min-width:0;
}

.dictionary-blueprint-key-info{flex:1;min-width:0;}
.dictionary-blueprint-key-value{color:#fff;font:12px Consolas,monospace;word-break:break-all;}

.dictionary-blueprint-divider{
    width:4px;
    margin:0 25px;
    border-radius:2px;
    background:linear-gradient(180deg,#4a3525,#2b1e15);
}

.dictionary-blueprint-row-active .dictionary-blueprint-divider{
    background:linear-gradient(180deg,#2d5be3,#00d2ff);
    box-shadow:0 0 10px rgba(45,91,227,.6);
}

.dictionary-blueprint-values{flex:1;display:flex;align-items:center;}
.dictionary-blueprint-value-list{display:flex;flex-wrap:wrap;gap:15px;}

.dictionary-blueprint-item{
    position:relative;
    width:90px;
    height:62px;
    border-radius:10px 10px 16px 16px;
    border:2px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.12);
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    box-shadow:0 4px 8px rgba(0,0,0,.3),inset 0 2px 4px rgba(255,255,255,.15);
}
.dictionary-blueprint-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    padding: 20px;
    text-align: center;
    color: #a1836f;
    font-weight: bold;
    gap: 8px;
}
.dictionary-blueprint-item-fill{
    position:absolute;
    left:2px;right:2px;bottom:2px;top:35%;
    background:linear-gradient(180deg,#2d5be3,#1a3a9c);
    border-radius:0 0 12px 12px;
    opacity:.85;
}

.dictionary-blueprint-item-cap{position:absolute;top:-12px;font-size:14px;z-index:2;}
.dictionary-blueprint-item-label{position:absolute;z-index:3;font-size:18px;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.95);}

.dictionary-blueprint-row-active .dictionary-blueprint-item:last-child{animation:bottleDropImpact .45s cubic-bezier(.175,.885,.32,1.25) forwards;}
.dictionary-blueprint-row-active .dictionary-blueprint-item:last-child .dictionary-blueprint-item-fill{animation:elixirPourFilling 1.2s cubic-bezier(.4,0,.2,1) forwards;}
.dictionary-blueprint-row-active .dictionary-blueprint-item:last-child .dictionary-blueprint-item-fill:after{
content:"";position:absolute;inset:0;
background-image:
radial-gradient(circle at 25% 75%,rgba(255,255,255,.45) 1.5px,transparent 2px),
radial-gradient(circle at 60% 40%,rgba(255,255,255,.55) 2.5px,transparent 3px),
radial-gradient(circle at 75% 65%,rgba(255,255,255,.35) 1.5px,transparent 2px);
animation:particleBubblesUp .8s linear infinite;
}

@keyframes bottleDropImpact{
0%{transform:scale(.4) translateY(-25px);filter:brightness(2);}
75%{transform:scale(1.08) translateY(2px);}
100%{transform:scale(1) translateY(0);}
}
@keyframes elixirPourFilling{
0%{top:100%;opacity:.3;}
30%{opacity:1;}
100%{top:35%;}
}
@keyframes particleBubblesUp{
0%{background-position:0 24px;}
100%{background-position:0 -24px;}
}


/* SQUISHED Dictionary - Starts*/

/* =====================================================================
   DICTIONARY BLUEPRINT - COMPACT VARIANT
   Apply .dictionary-squished on the wrapper when vertical space is tight
   ===================================================================== */

.dictionary-squished .dictionary-blueprint {
    margin-top: 6px;
    padding: 6px 10px;
    gap: 4px;
}

.dictionary-squished .dictionary-blueprint-header {
    padding: 2px 16px 6px;
}

.dictionary-squished .dictionary-blueprint-row {
    padding: 3px 12px;
    border-bottom-width: 3px;
}

.dictionary-squished .dictionary-blueprint-key {
    padding: 4px 8px;
}

.dictionary-squished .dictionary-blueprint-item {
    width: 65px;
    height: 38px;
    border-radius: 6px 6px 10px 10px;
}

.dictionary-squished .dictionary-blueprint-item-label {
    font-size: 14px;
}

.dictionary-squished .dictionary-blueprint-item-fill {
    top: 20%;
}

.dictionary-squished .dictionary-blueprint-value-list {
    gap: 8px;
}

.dictionary-squished .dictionary-blueprint-empty {
    min-height: 40px;
    padding: 8px;
}
/* SQUISHED Dictionary - Ends*/