/* ==========================================================================
   GGU Stats 0.9.1 — Share Cards + HTML Signatures
   Scoped to share-card.php only.
   ========================================================================== */

.ggu-share-shell{
    width:min(1080px,100%);
    margin:0 auto;
}

.ggu-share-mode-tabs{
    display:flex;
    gap:4px;
    margin:0 0 14px;
    padding:5px;
    width:max-content;
    max-width:100%;
    background:rgba(26,29,39,.65);
    border:1px solid rgba(220,223,230,.08);
    border-radius:8px;
}
.ggu-share-mode-tabs a{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border-radius:6px;
    color:#8a8f9c;
    font-size:12px;
    font-weight:700;
}
.ggu-share-mode-tabs a:hover{color:#fff}
.ggu-share-mode-tabs a.active{
    color:#fff;
    background:linear-gradient(135deg,#ffc126,#f29a16);
}

.ggu-share-card{
    overflow:hidden;
    background:rgba(26,29,39,.76);
    border:1px solid rgba(220,223,230,.09);
    border-radius:10px;
    box-shadow:0 18px 44px rgba(0,0,0,.32);
    backdrop-filter:blur(18px) saturate(140%);
}

.ggu-share-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:24px;
    background:
        radial-gradient(circle at 86% 0,rgba(255,179,0,.13),transparent 38%),
        transparent;
}

.ggu-share-card-player{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}
.ggu-share-avatar{
    width:92px;
    height:92px;
    object-fit:cover;
    flex:0 0 92px;
    border-radius:50%;
    border:3px solid rgba(255,179,0,.55);
    box-shadow:0 0 0 5px rgba(255,179,0,.07),0 0 22px rgba(255,179,0,.2);
}
.ggu-share-card-player h2{
    margin:2px 0 2px;
    font-size:30px;
    line-height:1;
}
.ggu-share-card-player p{
    margin:0;
    color:#8a8f9c;
}

.ggu-share-rank{
    flex:0 0 auto;
    min-width:130px;
    text-align:right;
}
.ggu-share-rank span{
    display:block;
    color:#8a8f9c;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}
.ggu-share-rank strong{
    display:block;
    margin-top:2px;
    color:#ffc126;
    font-size:34px;
}

.ggu-share-stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid rgba(220,223,230,.08);
    border-bottom:1px solid rgba(220,223,230,.08);
}
.ggu-share-stats>div{
    padding:14px 16px;
    border-right:1px solid rgba(220,223,230,.08);
}
.ggu-share-stats>div:last-child{border-right:0}
.ggu-share-stats span{
    display:block;
    color:#8a8f9c;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.ggu-share-stats strong{
    display:block;
    margin-top:3px;
    font-size:18px;
}

.ggu-share-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 16px;
    color:#8a8f9c;
    font-size:10px;
}
.ggu-share-card-footer span{
    color:#ffb300;
    font-weight:700;
}

.ggu-share-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
    margin-top:12px;
}
.ggu-share-actions .button{
    min-height:36px;
    padding:8px 14px!important;
}

.ggu-share-panel{
    padding:18px;
    margin-bottom:14px;
    background:rgba(26,29,39,.68);
    border:1px solid rgba(220,223,230,.09);
    border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.ggu-share-heading{
    display:flex;
    justify-content:space-between;
    gap:18px;
    margin-bottom:12px;
}
.ggu-share-heading h2{
    margin:2px 0 2px;
    font-size:18px;
}
.ggu-share-heading p{
    margin:0;
    color:#8a8f9c;
    font-size:11px;
}

.ggu-signature-preview{
    overflow:auto;
    padding:12px;
    background:rgba(7,8,12,.3);
    border:1px solid rgba(220,223,230,.06);
    border-radius:8px;
}
.ggu-signature-preview iframe{
    display:block;
    width:720px;
    max-width:100%;
    height:76px;
    margin:0 auto;
    border:0;
}

.ggu-share-code-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.ggu-share-code-grid .ggu-share-panel{
    margin-bottom:0;
}
.ggu-share-code{
    width:100%;
    min-height:150px;
    resize:vertical;
    padding:11px;
    color:#dcdfe6;
    background:#0d1118;
    border:1px solid rgba(255,179,0,.25);
    border-radius:7px;
    font:11px/1.5 "JetBrains Mono",monospace;
}
.ggu-copy-button{
    margin-top:9px;
}

.ggu-share-notice{
    margin-top:14px;
    padding:11px 13px;
    color:#aeb2bc;
    background:rgba(255,179,0,.055);
    border:1px solid rgba(255,179,0,.18);
    border-radius:8px;
    font-size:11px;
}
.ggu-share-notice strong{color:#ffc126}

/* Standalone live signature */
html:has(body.ggu-signature-embed){
    background:transparent!important;
}
body.ggu-signature-embed{
    margin:0;
    padding:0;
    overflow:hidden;
    background:transparent!important;
    color:#fff;
    font-family:"Source Sans Pro","Segoe UI",Arial,sans-serif;
}
.ggu-signature-card{
    display:grid;
    grid-template-columns:46px 54px minmax(150px,1fr) repeat(4,72px) 24px;
    align-items:center;
    width:720px;
    height:72px;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
    background:#1a1d27;
    border:1px solid #34303a;
    border-radius:8px;
    box-sizing:border-box;
}
.ggu-signature-brand{
    display:grid;
    place-items:center;
    align-self:stretch;
    color:#fff;
    background:#ffb300;
    font-size:12px;
    font-weight:900;
}
.ggu-signature-avatar{
    width:44px;
    height:44px;
    margin:auto;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #ffb300;
}
.ggu-signature-identity{
    min-width:0;
    padding:0 10px 0 2px;
}
.ggu-signature-identity strong,
.ggu-signature-identity small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ggu-signature-identity strong{font-size:14px}
.ggu-signature-identity small{margin-top:2px;color:#fff;font-size:10px;opacity:.78}
.ggu-signature-stat{
    padding:0 8px;
    text-align:center;
    border-left:1px solid #2a2d3a;
}
.ggu-signature-stat small{
    display:block;
    color:#fff;
    opacity:.78;
    font-size:8px;
    text-transform:uppercase;
}
.ggu-signature-stat b{
    display:block;
    margin-top:2px;
    font-size:12px;
}
.ggu-signature-stat:first-of-type b{color:#ffc126}
.ggu-signature-arrow{
    color:#ffb300;
    font-size:20px;
    text-align:center;
}

@media(max-width:700px){
    .ggu-share-card-head{
        align-items:flex-start;
        padding:18px;
    }
    .ggu-share-avatar{
        width:70px;
        height:70px;
        flex-basis:70px;
    }
    .ggu-share-card-player h2{font-size:23px}
    .ggu-share-rank strong{font-size:27px}
    .ggu-share-stats{
        grid-template-columns:repeat(2,1fr);
    }
    .ggu-share-stats>div{
        border-bottom:1px solid rgba(220,223,230,.08);
    }
    .ggu-share-stats>div:nth-child(even){border-right:0}
    .ggu-share-stats>div:last-child{grid-column:1/-1;border-bottom:0}
    .ggu-share-code-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
    .ggu-share-card-head{display:block}
    .ggu-share-rank{
        margin-top:14px;
        text-align:left;
    }
    .ggu-share-card-player{
        align-items:flex-start;
    }
    .ggu-share-actions{
        justify-content:stretch;
    }
    .ggu-share-actions .button{
        flex:1 1 auto;
    }
}


/* GGU Stats 1.0.16 — signature style selector */
.ggu-signature-style-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}
.ggu-signature-style-option{
    display:block;
    min-height:76px;
    padding:12px;
    border:1px solid rgba(220,223,230,.10);
    border-radius:8px;
    background:rgba(11,14,20,.45);
    color:#fff!important;
    text-decoration:none!important;
    transition:.16s ease;
}
.ggu-signature-style-option:hover{
    border-color:rgba(255,179,0,.45);
    transform:translateY(-1px);
}
.ggu-signature-style-option.active{
    border-color:#ffb300;
    background:rgba(255,179,0,.08);
    box-shadow:inset 0 0 0 1px rgba(255,179,0,.10);
}
.ggu-signature-style-option strong,
.ggu-signature-style-option span{display:block}
.ggu-signature-style-option strong{font-size:13px}
.ggu-signature-style-option span{
    margin-top:5px;
    color:#fff!important;
    opacity:.72;
    font-size:10px;
    line-height:1.35;
}
@media(max-width:800px){
    .ggu-signature-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
    .ggu-signature-style-grid{grid-template-columns:1fr}
}


/* GGU Stats 1.0.17 — exact signature iframe sizing */
.ggu-signature-preview{
    line-height:0;
}
.ggu-signature-preview iframe{
    display:block;
    margin:0 auto;
    padding:0;
    border:0;
    background:transparent;
    vertical-align:top;
}


/* GGU Stats 1.0.18 — iframe canvas background hardening */
.ggu-signature-preview{
    background:#0d1118 !important;
}
.ggu-signature-preview iframe{
    background:#1a1d27 !important;
}


/* GGU Stats 1.0.20 — signature preview dimension fix
   The original 0.9.1 rule hard-coded height:76px and caused the visible
   white strip below 72px signatures. Inline dimensions now carry the
   per-style size; these rules remove the legacy sizing as a fallback. */
.ggu-signature-preview{
    line-height:0!important;
    overflow:hidden!important;
}
.ggu-signature-preview iframe{
    display:block!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    border:0!important;
    vertical-align:top!important;
}