:root{
  --card:#ffffff;
  --ink:#253047;
  --muted:#7a879b;
  --accent:#4dd1c9;
  --line:#e6e8ef;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:hidden;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
}

main{
  display:flex;
  flex-direction:column;
  gap:22px;
  max-width:1300px;
  margin:0 auto;
  padding:18px;
}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
  width:100%;
}
.panel h2{margin:0 0 12px;font-size:16px;}

.top-layout{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:22px;
  align-items:flex-start;
}

/* Tabs ---------------------------------------------------- */
.tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  background:#f3f6fb;
  padding:6px;
  border-radius:999px;
  justify-content:space-between;
}

.tab-btn{
  flex:1;
  border-radius:999px;
  border:none;
  background:transparent;
  padding:6px 4px;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.tab-icon{
  font-size:18px;
  line-height:1;
  filter:grayscale(1);
  opacity:.85;
}

.tab-label{
  font-size:11px;
  display:none;
}

.tab-btn.active{
  background:#fff;
  color:var(--ink);
  font-weight:600;
  box-shadow:0 3px 8px rgba(15,23,42,.08);
}

.tab-btn.active .tab-label{
  display:block;
}

.tab-content{display:none;}
.tab-content.active{display:block;}

/* Form fields --------------------------------------------- */
.field{
  display:flex;
  flex-direction:column;
  margin-bottom:10px;
}
.field label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.field input,
.field select{
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font:inherit;
  width:100%;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.field-sub{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:6px;
}
.sub-label{
  font-size:11px;
  color:var(--muted);
}

button{
  appearance:none;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  font:inherit;
}
button.primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
  font-weight:600;
}

/* Choice grids ------------------------------------------- */
.choice-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.choice-grid.horizontal{
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:4px;
}
.choice-grid.horizontal::-webkit-scrollbar{
  height:5px;
}
.choice-grid.horizontal::-webkit-scrollbar-thumb{
  background:#d1d6e5;
  border-radius:999px;
}

.choice{
  width:78px;
  border-radius:12px;
  border:2px solid transparent;
  background:#f3f6fb;
  padding:4px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 78px;
}
.choice img{
  width:100%;
  height:72px;
  object-fit:contain;
  display:block;
}
.choice span{
  font-size:10px;
  margin-top:2px;
  text-align:center;
  color:var(--muted);
}
.choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.choice.selected{
  border-color:var(--accent);
  background:#fff;
}

/* Body as color blobs ------------------------------------ */
.body-choice{
  width:auto;
  padding:4px 6px 7px;
  border-radius:12px;
  border:2px solid transparent;
  background:#f3f6fb;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 auto;
  min-width:64px;
}
.body-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.body-choice.selected{
  border-color:var(--accent);
  background:#fff;
}
.body-swatch{
  width:28px;
  height:28px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.06);
  box-shadow:0 2px 4px rgba(15,23,42,.15) inset;
}
.body-choice span{
  font-size:10px;
  margin-top:4px;
  color:var(--muted);
  text-align:center;
}

/* Eye shape grid – game-style cards ---------------------- */
/* Eye shape grid – card look, single-eye preview ---------- */
.eye-grid .choice{
  width:96px;
  flex-basis:96px;
  padding:10px 8px 8px;
  align-items:center;
  position:relative;

  /* Karten-Optik ohne bunte Ecke */
  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 65%,
    #f2f3f7 65%,
    #f2f3f7 100%
  );
  border-radius:16px;
  box-shadow:0 2px 4px rgba(15,23,42,.06);
}

/* WICHTIG: falls du vorher ein ::before für die bunte Ecke hattest – LÖSCHEN! */
/* .eye-grid .choice::before { … } einfach komplett entfernen */

.eye-grid .choice img{
  height:76px;          /* Auge groß */
  width:auto;
  object-fit:contain;
  margin-bottom:4px;
}

.eye-card-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding-top:2px;
}

.eye-card-name{
  font-size:9px;
  color:var(--muted);
  text-align:center;
}

.eye-card-colors{
  display:flex;
  gap:3px;
  justify-content:center;
  flex-wrap:wrap;
}

.eye-card-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  box-sizing:border-box;
}

/* Auswahlrahmen */
.eye-grid .choice.selected{
  border-color:#ffffff;
  box-shadow:0 0 0 3px #ffa83a;
}


/* Mouth grid – bigger previews, slimmer tiles ------------ */
#mouthGrid .choice{
  width:60px;
  flex-basis:60px;
  padding:4px;
}
#mouthGrid .choice img{
  height:40px;
  width:auto;
  object-fit:contain;
  transform:scale(2);
  transform-origin:center;
}
#mouthGrid .choice span{
  font-size:9px;
  margin-top:2px;
}

/* Farb-Kacheln (Augen & Haare) --------------------------- */
.eye-color-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.eye-color-swatch{
  width:26px;
  height:22px;
  border-radius:6px;
  border:2px solid #d0d4e0;
  background:#f3f4f9;
  padding:2px;
  box-sizing:border-box;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.eye-color-swatch-inner{
  width:100%;
  height:100%;
  border-radius:4px;
  background:#cbd5e1;
}
.eye-color-swatch.active{
  border-color:#ffffff;
  box-shadow:0 0 0 2px #f4b400;
}

/* Badges -------------------------------------------------- */
.badges-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.badge-opt{
  position:relative;
  border-radius:12px;
  border:2px solid transparent;
  background:#f7f3ec;
  padding:6px;
  cursor:pointer;
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
}
.badge-opt input{
  position:absolute;
  inset:0;
  opacity:0;
}
.badge-opt img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.badge-opt.selected{
  border-color:var(--accent);
  background:#fff;
}
.badge-hint{
  color:var(--muted);
}

/* Bag toggle row ----------------------------------------- */
.bag-toggle-row{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}
.bag-toggle-row input{
  margin:0;
}
.bag-icon{
  width:22px;
  height:22px;
  object-fit:contain;
}

/* Passport preview – Desktop default --------------------- */
.preview-wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
}
.passport{
  width:100%;
  max-width:none;
  aspect-ratio:1105/768;
  position:relative;
  background:url('Idpassbg.png') no-repeat center/contain;
  border-radius:24px;
  overflow:hidden;
}

.chibi-slot{
  position:absolute;
  left:6%;
  top:10%;
  width:38%;
  height:80%;
  display:grid;
  place-items:center;
}
.photo{
  width:80%;
  height:80%;
  border-radius:18px;
  overflow:hidden;
  display:grid;
  place-items:center;
}

.chibi-layers{
  position:relative;
  width:100%;
  height:100%;
}
/* keine Verzerrung – über Höhe anpassen */
.chibi-layers img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:100%;
  width:auto;
  display:none;
}

.info-slot{
  position:absolute;
  left:42%;
  top:26%;
  width:44%;
  height:52%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:6px;
  font-size:14px;
  overflow:hidden;
}
.nickname{
  font-size:32px;
  font-weight:800;
  text-align:center;
  width:100%;
  margin:0 auto;
  font-family:'Marimpa',cursive;
}
.title{
  font-size:15px;
  font-weight:700;
  color:#3f3b46;
  margin-left:30px;
  margin-right:16px;
  line-height:1.3;
  text-align:center;
}
.uid-line,
.server-line{
  font-size:13px;
  color:var(--muted);
  line-height:1.3;
}
.uid-line .value{
  font-weight:600;
  color:var(--ink);
}
.meta-slot{
  font-size:12px;
  margin-left:30px;
  margin-top:8px;
}

/* Badges auf der Karte ----------------------------------- */
.badges-slot{
  position:absolute;
  right:14%;
  bottom:19%;
  width:28%;
  height:17%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.hex-slot{
  width:26%;
  aspect-ratio:1/1;
  border-radius:999px;
  background:#b2e0dd;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hex-slot img{
  width:85%;
  height:85%;
  object-fit:contain;
}

/* Preview actions (Random + Download) -------------------- */
.preview-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Tablet / kleiner Desktop ------------------------------- */
@media (max-width: 980px){
  main{flex-direction:column;}
  .top-layout{grid-template-columns:1fr;}

  .choice{
    width:70px;
    flex-basis:70px;
  }
  .choice img{
    height:60px;
  }
}

/* Mobile – Hochkant-Pass --------------------------------- */
@media (max-width: 600px){
  main{
    padding:12px;
    gap:16px;
  }

  .panel{
    padding:12px;
  }

  .top-layout{
    grid-template-columns:1fr;
  }

  .tabs{
    flex-wrap:wrap;
  }

  .preview-wrap{
    justify-content:center;
  }

  .passport{
    width:100%;
    max-width:430px;
    margin:0 auto;
    aspect-ratio:768/1376;
    background:url('mobilebg.png') no-repeat center/contain;
    position:relative;
    border-radius:0;
    overflow:hidden;
  }

  .chibi-slot{
    position:absolute;
    left:12%;
    top:2%;
    width:76%;
    height:32%;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .photo{
    width:100%;
    height:100%;
    border-radius:24px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .info-slot{
    position:absolute;
    left:12%;
    top:40%;
    width:76%;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:2px;
    font-size:13px;
    text-align:center;
  }

  .nickname{
    font-size:20px;
    margin:0;
  }

  .title{
    font-size:13px;
    margin:0;
  }

  .meta-slot{
    margin-top:8px;
    margin-left:0;
    font-size:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    text-align:center;
  }

  .badges-slot{
    position:absolute;
    left:16%;
    right:16%;
    bottom:13%;
    width:auto;
    height:9%;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .hex-slot{
    flex:0 0 30%;
    height:100%;
    aspect-ratio:1/1;
    border-radius:50%;
    background:transparent;
    display:grid;
    place-items:center;
    overflow:hidden;
  }

  .hex-slot img{
    width:85%;
    height:85%;
    object-fit:contain;
  }

  .choice{
    width:64px;
    flex-basis:64px;
  }
  .choice img{
    height:56px;
  }
  #outfitGrid .choice img,
  #hatGrid .choice img{
    height:50px;
  }
}