.afexkidz-starfield{
  --bg:#05070a;
  --panel:#071015;
  --line:#1a5b53;
  --accent:#2bffc7;
  --accent2:#6bd3ff;
  --muted:#9ac4bf;
  --warn:#ff3b6a;

  background:linear-gradient(180deg, #05070a 0%, #030507 100%);
  border:1px solid rgba(43,255,199,0.14);
  border-radius:14px;
  padding:12px;
  max-width:980px;
  margin:0 auto;
  color:var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

.afexkidz-topbar,
.afexkidz-bottombar,
.afexkidz-layerrow{
  display:flex;
  gap:8px;
  width:100%;
}

.afexkidz-btn{
  appearance:none;
  border-radius:12px;
  border:1px solid rgba(43,255,199,0.22);
  background:linear-gradient(180deg, rgba(11,24,28,0.92), rgba(5,10,12,0.92));
  color:var(--accent);
  padding:12px 10px;
  font-size:14px;
  line-height:1;
  letter-spacing:0.4px;
  flex:1;
  min-height:44px;
  user-select:none;
}

.afexkidz-btn:active{
  transform: translateY(1px);
  border-color: rgba(107,211,255,0.35);
}

.afexkidz-btn-panic{
  border-color: rgba(255,59,106,0.25);
  color: var(--warn);
}

.afexkidz-padwrap{ margin:10px 0; }

.afexkidz-pad{
  position:relative;
  width:100%;
  height: min(62vh, 520px);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(107,211,255,0.18);
  background:
    radial-gradient(800px 420px at 60% 35%, rgba(107,211,255,0.12), rgba(0,0,0,0) 55%),
    radial-gradient(900px 520px at 35% 65%, rgba(43,255,199,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(4,8,10,0.9), rgba(0,0,0,0.95));
  touch-action:none;
}

.afexkidz-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(43,255,199,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(107,211,255,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:0.5;
  pointer-events:none;
}

.afexkidz-cursor{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(43,255,199,0.55);
  box-shadow:
    0 0 0 6px rgba(43,255,199,0.08),
    0 0 16px rgba(107,211,255,0.18);
  transform: translate(-50%, -50%);
  pointer-events:none;
  background: radial-gradient(circle, rgba(43,255,199,0.35), rgba(0,0,0,0));
}

.afexkidz-hud{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
}

.afexkidz-hudline{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.afexkidz-chip{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(43,255,199,0.16);
  background: rgba(3,6,8,0.55);
  color: var(--muted);
  font-size:12px;
}

.afexkidz-chip b{ color: var(--accent2); }
.afexkidz-hint{ opacity:0.75; font-size:12px; }

.afexkidz-layerpanel{
  margin: 10px 0 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(43,255,199,0.12);
  background: rgba(3,6,8,0.35);
}

.afexkidz-subrow .afexkidz-btn{
  min-height: 40px;
  padding: 10px 10px;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--muted);
  border-color: rgba(107,211,255,0.18);
}

.afexkidz-btn-layer{
  color: var(--accent2);
  border-color: rgba(107,211,255,0.22);
}

.afexkidz-presets{ gap:10px; }

.afexkidz-selectwrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  border:1px solid rgba(43,255,199,0.16);
  background: rgba(5,10,12,0.55);
  min-height: 40px;
}

.afexkidz-selectwrap span{
  color: var(--muted);
  font-size: 12px;
  opacity: 0.8;
}

.afexkidz-selectwrap select{
  width: 64px;
  border-radius: 10px;
  border:1px solid rgba(107,211,255,0.22);
  background: rgba(3,6,8,0.65);
  color: var(--accent2);
  padding: 6px 8px;
  font-family: inherit;
}

.afexkidz-footer{ margin-top:10px; opacity:0.6; font-size:12px; }

.afexkidz-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.58);
  padding:18px;
  z-index:999999;
}
.afexkidz-modal.is-open{ display:flex; }

.afexkidz-modal-card{
  width:min(720px, 100%);
  border-radius:16px;
  border:1px solid rgba(43,255,199,0.18);
  background: linear-gradient(180deg, rgba(7,16,21,0.96), rgba(3,6,9,0.98));
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  padding:14px;
  color: var(--muted);
}
.afexkidz-modal-title{
  color: var(--accent2);
  font-size:14px;
  letter-spacing:0.8px;
  margin-bottom:8px;
}
.afexkidz-modal-body{ font-size:13px; line-height:1.45; }
.afexkidz-section-title{
  margin-top:10px;
  margin-bottom:6px;
  color: var(--accent);
  font-size:12px;
  letter-spacing:0.6px;
}
.afexkidz-modal-body ul{ margin: 6px 0 0 18px; padding:0; }
.afexkidz-modal-actions{ display:flex; justify-content:flex-end; margin-top:10px; }
.afexkidz-btn-close{ max-width:160px; }

.afexkidz-starfield.is-frozen .afexkidz-pad{
  filter: saturate(1.1) contrast(1.05);
  border-color: rgba(43,255,199,0.32);
}
.afexkidz-starfield.is-frozen .afexkidz-cursor{
  border-color: rgba(107,211,255,0.55);
  box-shadow: 0 0 0 6px rgba(107,211,255,0.10), 0 0 18px rgba(43,255,199,0.14);
}

.afexkidz-starfield.layer1-muted [data-action="mute"][data-target-layer="1"],
.afexkidz-starfield.layer2-muted [data-action="mute"][data-target-layer="2"],
.afexkidz-starfield.layer3-muted [data-action="mute"][data-target-layer="3"]{
  border-color: rgba(255,59,106,0.22);
  color: rgba(255,59,106,0.92);
}

.afexkidz-starfield.layer1-frozen [data-action="freeze_layer"][data-target-layer="1"],
.afexkidz-starfield.layer2-frozen [data-action="freeze_layer"][data-target-layer="2"],
.afexkidz-starfield.layer3-frozen [data-action="freeze_layer"][data-target-layer="3"]{
  border-color: rgba(43,255,199,0.28);
  color: rgba(43,255,199,0.95);
}

@media (max-width: 520px){
  .afexkidz-btn{ font-size:13px; padding:12px 8px; }
  .afexkidz-chip{ font-size:11px; }
  .afexkidz-pad{ height: 58vh; }
  .afexkidz-layerpanel{ padding: 10px; }
  .afexkidz-subrow .afexkidz-btn{ font-size: 12px; }
  .afexkidz-selectwrap{ padding: 10px 10px; }
}


/* PATCH v2.1.8: title */
.afexkidz-title{
  text-align:center;
  font-size:18px;
  letter-spacing:3px;
  margin: 2px 0 10px;
  color: var(--accent2);
  text-shadow: 0 0 14px rgba(107,211,255,0.28);
}

/* ===== PATCH v2.2.1 UX presets ===== */
.afexkidz-presets{
  gap: 10px;
  align-items: stretch;
}

.afexkidz-selectwrap{
  flex: 1 1 220px;
  min-width: 0; /* critical: prevent overflow in flex */
}

.afexkidz-selectwrap select{
  width: 100%;
  min-width: 0;
}

/* Mobile: each preset on its own row for clean UX */
@media (max-width: 620px){
  .afexkidz-presets{
    gap: 8px;
  }
  .afexkidz-selectwrap{
    flex: 1 1 100%;
  }
}