
.lga-tool-frame-wrap {
    width: 100%;
    max-width: 100%;
    min-height: var(--lga-tool-height, 650px);
    margin: -10px auto 10px auto;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 8px;
    clear: both;
}

.lga-tool-frame-wrap.lga-tool-keyboard-tester {
    width: 100%;
    max-width: 100%;
}

.lga-tool-frame {
    width: 100%;
    min-height: var(--lga-tool-height, 650px);
    height: var(--lga-tool-height, 650px);
    border: 0;
    display: block;
    background: #ffffff;
}

.lga-tool-error {
    padding: 12px 16px;
    border: 1px solid #ffb3b3;
    background: #fff5f5;
    color: #b00020;
    border-radius: 6px;
}

@media (min-width: 1025px) {
    .lga-tool-frame-wrap.lga-tool-keyboard-tester {
        max-width: 1240px;
    }
}

@media (max-width: 1024px) {
    .lga-tool-frame-wrap,
    .lga-tool-frame {
        min-height: min(var(--lga-tool-height, 650px), 82vh);
        height: min(var(--lga-tool-height, 650px), 82vh);
    }
}

@media (max-width: 600px) {
    .lga-tool-frame-wrap {
        margin-top: -4px;
        margin-bottom: 14px;
    }
    .lga-tool-frame-wrap,
    .lga-tool-frame {
        min-height: min(var(--lga-tool-height, 650px), 78vh);
        height: min(var(--lga-tool-height, 650px), 78vh);
    }
}


/* LGA request 2026-07-02: tighter wrapper bottom spacing */
.lga-tool-frame-wrap{margin-bottom:6px;}
.lga-tool-frame-wrap[data-lga-tool="keyboard_tester"]{overflow:hidden;}
@media(max-width:768px){.lga-tool-frame-wrap{margin-bottom:8px;}}


/* LGA request 2026-07-04: equal mobile gap between every tool and first heading/content */
@media(max-width:768px){
  .lga-tool-frame-wrap{
    margin-bottom:12px !important;
    min-height:0 !important;
  }
  .lga-tool-frame{min-height:0 !important;}
}


/* LGA 2026-07-04 v1.0.7: final equal mobile gap and auto-height support */
@media(max-width:768px){
  .lga-tool-frame-wrap{margin-bottom:12px !important; overflow:hidden !important;}
  .lga-tool-frame{display:block !important; width:100% !important;}
}


/* LGA 2026-07-04 v1.0.8: keep one equal mobile gap after iframe shrink */
@media(max-width:768px){
  .lga-tool-frame-wrap{margin-bottom:12px !important;}
}


/* LGA v9: FPS + Headphone compact placement only */
.lga-tool-frame-wrap[data-lga-tool="fps_tester"],
.lga-tool-frame-wrap[data-lga-tool="headphone_tester"]{
  margin-top:-22px !important;
  margin-bottom:4px !important;
  background:#ffffff !important;
}
.lga-tool-frame-wrap[data-lga-tool="fps_tester"] .lga-tool-frame,
.lga-tool-frame-wrap[data-lga-tool="headphone_tester"] .lga-tool-frame{
  background:#ffffff !important;
}
@media(max-width:768px){
  .lga-tool-frame-wrap[data-lga-tool="fps_tester"],
  .lga-tool-frame-wrap[data-lga-tool="headphone_tester"]{
    margin-top:-16px !important;
    margin-bottom:6px !important;
  }
}


/* LGA v10: requested FPS + Headphone placement fixes only */
.lga-tool-frame-wrap[data-lga-tool="headphone_tester"]{
  margin-top:-34px !important;
}
@media(max-width:768px){
  .lga-tool-frame-wrap[data-lga-tool="fps_tester"],
  .lga-tool-frame-wrap[data-lga-tool="headphone_tester"]{
    margin-bottom:2px !important;
  }
  .lga-tool-frame-wrap[data-lga-tool="headphone_tester"]{
    margin-top:-26px !important;
    border-radius:12px !important;
  }
  .lga-tool-frame-wrap[data-lga-tool="headphone_tester"]::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:12px;
    padding:4px;
    background:linear-gradient(120deg,#00e5ff,#00ff88,#ffd000,#ff3df2,#00e5ff);
    background-size:300% 300%;
    animation:lgaHeadphoneLedMove 3s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    z-index:2;
  }
  .lga-tool-frame-wrap[data-lga-tool="headphone_tester"] .lga-tool-frame{
    position:relative;
    z-index:1;
  }
}
@keyframes lgaHeadphoneLedMove{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}


/* LGA v11: Headphone mobile LED slower + richer colors, FPS/Headphone normal mobile gap */
@media(max-width:768px){
  .lga-tool-frame-wrap[data-lga-tool="fps_tester"],
  .lga-tool-frame-wrap[data-lga-tool="headphone_tester"]{
    margin-bottom:12px !important;
  }
  .lga-tool-frame-wrap[data-lga-tool="headphone_tester"]::before{
    background:linear-gradient(120deg,#00e5ff,#3b82f6,#22c55e,#a3e635,#facc15,#fb923c,#ef4444,#ec4899,#a855f7,#00e5ff) !important;
    background-size:650% 650% !important;
    animation:lgaHeadphoneLedMove 8s linear infinite !important;
  }
}
