:root{
  --bg:#0f1110;
  --card:#151816;
  --panel:#101311;
  --border:#2a2f2b;
  --text:#d7ddd9;
  --muted:#9aa39c;
  --main:#7daa63;
  --accent:#cc4a3a;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui;
}




.gemmaApp{
  max-width:600px;
  margin:20px auto;
}

.gemmaCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  margin-bottom:22px;
}

.gemmaTitle{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:14px;
  color:var(--main);
}






/* POHÁR ALAP */
.glass{
  position:relative;
  margin:0 auto;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.35);
  overflow:hidden;
}

/* FOLYADÉK – EZ MOST MINDIG MEGJELENIK */
.liquid{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  height:var(--fill,60%);
  background:var(--liquid,#555);
}

/* FORMÁK */
.lowball{width:32px;height:34px;border-radius:6px}


.shot{
  width:26px;
  height:36px;
  clip-path:polygon(
    10% 0%,
    90% 0%,
    80% 100%,
    20% 100%
  );
}


.jenkins .liquid{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:12%;
  background:linear-gradient(
  to top,
  #7fdcff 0%,
  #b3ecff 50%,
  #7fdcff 100%
);
background-size:100% 200%;
animation:jenkinsShear 6s ease-in-out infinite;
}


@keyframes jenkinsShear{
  0%{ background-position:0% 0%; }
  50%{ background-position:0% 100%; }
  100%{ background-position:0% 0%; }
}



.mug{width:34px;height:44px;border-radius:4px}
/* SÖRÖSKORSÓ – VALÓDI FÜL */
.mug::before{
  content:"";
  position:absolute;
  right:-14px;
  top:8px;
  width:16px;
  height:28px;
  border:3px solid rgba(255,255,255,.45);
  border-left:0;
  border-radius:0 14px 14px 0;
}

.mug::after{
  content:"";
  position:absolute;
  right:-9px;
  top:13px;
  width:8px;
  height:18px;
  background:#111;
  border-radius:0 9px 9px 0;
}

.mug{
  overflow:visible;
}



/* GUINNESS */



/* =========================
   GUINNESS – STABIL VERZIÓ
   ========================= */

.guinness{
  position:relative;
}

/* SÖR (FOLYADÉK) */
.guinness .beer{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:16px;              /* hely a habnak */
  background:#0b0b0b;
  overflow:hidden;
  z-index:1;
}

/* HAB */
.guinness .foam{
  position:absolute;
  top:2px;
  left:2px;
  right:2px;
  height:14px;
  background:
    radial-gradient(circle at 20% 70%, #fff 55%, transparent 56%),
    radial-gradient(circle at 50% 40%, #fff 55%, transparent 56%),
    radial-gradient(circle at 80% 70%, #fff 55%, transparent 56%),
    #f5f5f5;
  border-radius:6px 6px 4px 4px;
  z-index:3;
}

/* BUBORÉK */
.guinness .bubble{
  position:absolute;
  bottom:-6px;
  width:2px;
  height:2px;
  background:rgba(255,255,255,.8);
  animation:guinnessBubble linear infinite;
  z-index:2;
}

/* BUBORÉK POZÍCIÓK */
.guinness .bubble:nth-child(1){left:12%;animation-duration:6s}
.guinness .bubble:nth-child(2){left:24%;animation-duration:7s}
.guinness .bubble:nth-child(3){left:36%;animation-duration:5.8s}
.guinness .bubble:nth-child(4){left:48%;animation-duration:6.5s}
.guinness .bubble:nth-child(5){left:60%;animation-duration:7.2s}
.guinness .bubble:nth-child(6){left:72%;animation-duration:6.1s}
.guinness .bubble:nth-child(7){left:84%;animation-duration:7.8s}
.guinness .bubble:nth-child(8){left:94%;animation-duration:6.3s}

/* ANIMÁCIÓ */
@keyframes guinnessBubble{
  0%{
    transform:translateY(0);
    opacity:0;
  }
  15%{opacity:1}
  85%{opacity:1}
  100%{
    transform:translateY(-140px);
    opacity:0;
  }
}



.guinness .bubble{
  position:absolute;
  left:50%;
  top:100%;
  width:2px;
  height:2px;
  background:rgba(255,255,255,.55);
  animation:guinnessBubble 9s linear infinite;
  z-index:2;
}




/* VAJSÖR */

.butterscotch .beer{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:20px;
  background:linear-gradient(
    to top,
    #e3b857,
    #f3d27a,
    #f8e6a8
  );
  overflow:hidden;
  z-index:1;
}


.butterscotch .foam{
  position:absolute;
  top:-6px;
  left:-4px;
  right:-4px;
  height:24px;
  background:
    radial-gradient(circle at 15% 65%, #fff 55%, transparent 56%),
    radial-gradient(circle at 35% 45%, #fff 55%, transparent 56%),
    radial-gradient(circle at 55% 60%, #fff 55%, transparent 56%),
    radial-gradient(circle at 75% 40%, #fff 55%, transparent 56%),
    radial-gradient(circle at 90% 65%, #fff 55%, transparent 56%),
    #fff;
  border-radius:14px 14px 10px 10px;
  z-index:3;
}


.butterscotch .bubble{
  position:absolute;
  top:100%;
  width:2px;
  height:2px;
  background:rgba(255,255,255,.7);
  animation:guinnessBubble 11s linear infinite;
  z-index:2;
}


.butterscotch .bubble:nth-of-type(1){ left:12%; }
.butterscotch .bubble:nth-of-type(2){ left:24%; }
.butterscotch .bubble:nth-of-type(3){ left:36%; }
.butterscotch .bubble:nth-of-type(4){ left:48%; }
.butterscotch .bubble:nth-of-type(5){ left:60%; }
.butterscotch .bubble:nth-of-type(6){ left:72%; }
.butterscotch .bubble:nth-of-type(7){ left:84%; }
.butterscotch .bubble:nth-of-type(8){ left:92%; }


.butterscotch .bubble:nth-of-type(1){ animation-delay:0s; }
.butterscotch .bubble:nth-of-type(2){ animation-delay:1.2s; }
.butterscotch .bubble:nth-of-type(3){ animation-delay:0.6s; }
.butterscotch .bubble:nth-of-type(4){ animation-delay:1.8s; }
.butterscotch .bubble:nth-of-type(5){ animation-delay:0.3s; }
.butterscotch .bubble:nth-of-type(6){ animation-delay:2.1s; }
.butterscotch .bubble:nth-of-type(7){ animation-delay:0.9s; }
.butterscotch .bubble:nth-of-type(8){ animation-delay:1.5s; }



/*LANGYOS SÖR */

.flatbeer .beer{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:20px;
  background:linear-gradient(
    to top,
    #d6c26a,
    #eadf9c,
    #f3eebf
  );
  overflow:hidden;
  z-index:1;
}

.flatbeer .bubble{
  position:absolute;
  top:100%;
  width:2px;
  height:2px;
  background:rgba(255,255,255,.45);
  animation:guinnessBubble 11s linear infinite;
  z-index:2;
}

/* LANGYOS SÖR – buborék pozíciók */
.flatbeer .bubble:nth-of-type(1){ left:12%; }
.flatbeer .bubble:nth-of-type(2){ left:24%; }
.flatbeer .bubble:nth-of-type(3){ left:36%; }
.flatbeer .bubble:nth-of-type(4){ left:48%; }
.flatbeer .bubble:nth-of-type(5){ left:60%; }
.flatbeer .bubble:nth-of-type(6){ left:72%; }
.flatbeer .bubble:nth-of-type(7){ left:84%; }
.flatbeer .bubble:nth-of-type(8){ left:92%; }

/* LANGYOS SÖR – késleltetés (opcionális, de ajánlott) */
.flatbeer .bubble:nth-of-type(1){ animation-delay:0s; }
.flatbeer .bubble:nth-of-type(2){ animation-delay:1.1s; }
.flatbeer .bubble:nth-of-type(3){ animation-delay:0.5s; }
.flatbeer .bubble:nth-of-type(4){ animation-delay:1.7s; }
.flatbeer .bubble:nth-of-type(5){ animation-delay:0.3s; }
.flatbeer .bubble:nth-of-type(6){ animation-delay:2s; }
.flatbeer .bubble:nth-of-type(7){ animation-delay:0.9s; }
.flatbeer .bubble:nth-of-type(8){ animation-delay:1.4s; }





/* MÉZBOR */
.mead .liquid{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:20%;
  background:linear-gradient(
    120deg,
    #b8860b,
    #f1c232,
    #ffe599,
    #f1c232,
    #b8860b
  );
  background-size:300% 300%;
  animation:meadFlow 14s ease-in-out infinite;
  overflow:hidden;
}

@keyframes meadFlow{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}





/* BOROSPOHÁR – WRAPPERREL */
.wineWrap{position:relative}
.wine{
  width:30px;
  height:50px;
  clip-path:polygon(
    10% 0%,
    90% 0%,
    96% 18%,
    94% 32%,
    98% 50%,
    90% 66%,
    72% 82%,
    60% 100%,
    40% 100%,
    28% 82%,
    10% 66%,
    2% 50%,
    6% 32%,
    4% 18%
  );
}



.wineStem{
  width:4px;height:16px;
  background:rgba(255,255,255,.45);
box-shadow:0 0 1px rgba(255,255,255,.4);
  margin:0 auto;
}
.wineBase{
  width:22px;height:6px;
  background:rgba(255,255,255,.18);
  border-radius:999px;
  margin:0 auto;
}



/* LUXUS BOR – kristályfény */
.wineLuxury::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,.18) 48%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,.18) 52%,
      transparent 65%
    );
  animation:wineShine 6s ease-in-out infinite;
  pointer-events:none;
}


/* SUPERIOR RED – élő gradient */
.red .liquid{
  background:linear-gradient(
    180deg,
    #7b0000 0%,
    #ff0000 42%,
    #2a0000 100%
  );
  background-size:100% 260%;
  animation:superiorRedFlow 22s ease-in-out infinite;
}


@keyframes superiorRedFlow{
  0%{
    background-position:0% 0%;
  }
  50%{
    background-position:0% 100%;
  }
  100%{
    background-position:0% 0%;
  }
}





/* LAPOS ÜVEG */
.bottle{width:20px;height:52px;border-radius:6px}

/* REPOHÁR */
.plastic{
  width:30px;height:52px;
  clip-path:polygon(18% 0%,82% 0%,92% 100%,8% 100%);
}

/* FOLYADÉK SZÍNEK */
.fire{--liquid:linear-gradient(#ffdb57,#ff6a00,#b00000);--fill:58%}
.red{--liquid:linear-gradient(#7b0000,#3b0000);--fill:52%}
.dark{--liquid:#0b0b0b;--fill:80%}
.butter{--liquid:linear-gradient(#ffe2a1,#e0a83f);--fill:72%}
.honey{--liquid:linear-gradient(#ffe7a8,#c9892e);--fill:54%}
.clear{--liquid:rgba(220,245,255,.6);--fill:56%}
.green{--liquid:linear-gradient(#4dff9a,#0b5a2e);--fill:70%}



/* POHÁR EDIT */

/* LÁNGNYELV WHISKEY – nagyobb pohár */
.fireWhiskeyGlass{
  width:40px;
  height:42px;
  border-radius:8px;
}

/* LÁNGNYELV – jégkockák */
.fireIce::before,
.fireIce::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  background:rgba(255,255,255,.65);
  border-radius:2px;
  animation:iceFloat 3.6s ease-in-out infinite;
}

.fireIce::before{
  top:8px;
  left:8px;
  animation-delay:0s;
}

.fireIce::after{
  top:14px;
  left:18px;
  animation-delay:1.4s;
}

@keyframes iceFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
}



/* REPOHÁR */


.stohl .liquid{
  transform:rotate(180deg);
  transform-origin:center;
}

.stohl .liquid{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:15%;
  background:linear-gradient(
    to top,
    #1f7a3a,
    #2ecc71,
    #6aff9a
  );
  animation:stohlPulse 5s ease-in-out infinite;
}


@keyframes stohlPulse{
  0%{
    opacity:1;
  }
  40%{
    opacity:1;
  }
  55%{
    opacity:0;
  }
  70%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}


/* REPOHÁR (cup) – MÉRET + FORMA */
.cup{
  width:30px;
  height:52px;
  clip-path:polygon(
    8% 0%,
    92% 0%,
    82% 100%,
    18% 100%
  );
}


/* TÖRLÉS KOKTÉL */

.erase .liquid{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:12%;
  background:linear-gradient(
    to top,
    #5b2b82 0%,
    #7d3cb5 40%,
    #b57edc 60%,
    #7d3cb5 100%
  );
  background-size:100% 220%;
  animation:eraseShear 6.5s ease-in-out infinite;
}



/* KAPCSOLATOK */

.gemmaTabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}

.gemmaTabs button{
  flex:1;
  padding:8px 6px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}

.gemmaTabs button:hover{
  border-color:var(--main);
  color:var(--text);
}

.gemmaTabs button.active{
  background:rgba(125,170,99,.15);
  border-color:var(--main);
  color:var(--text);
}


.relationBox.active{
  display:flex;
}



.relationBox{
  display:flex;
  gap:14px;
  padding:14px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}

.relationBox.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition:opacity .35s ease,transform .35s ease;
}

.relationImage{
  width:96px;
  height:96px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  box-shadow:0 0 0 1px var(--border) inset;
}

.relationText{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}






/* KÓDGEN */

.genGrid{
  display:grid;
  gap:12px;
}

.genGrid input,
.genGrid textarea{
  background:#0c0f0d;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  color:var(--text);
}

.genGrid input:focus,
.genGrid textarea:focus{
  outline:none;
  border-color:var(--main);
}

.genPreview{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
	min-height:120px;
}


#previewText{
  white-space:pre-line;
}

.genBody{
  min-height:90px;
}


.genDrink .glass{
  transform:scale(.9);
}

.genText{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.genTitle{
  font-size:12px;
  font-weight:600;
  color:#fff;
}

.genBody{
  font-size:11px;
  line-height:1.4;
  color:#bbb;
}



#generate{
  background:rgba(125,170,99,.15);
  border:1px solid var(--main);
  border-radius:999px;
  padding:10px;
  font-size:11px;
  color:var(--text);
  cursor:pointer;
  transition:background .2s;
}

#generate:hover{
  background:rgba(125,170,99,.25);
}

#output{
  background:#0b0e0c;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  font-size:11px;
  color:var(--muted);
  min-height:80px;
}






.barShelf{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}

.drinkCard{
  width:120px;
  min-height:80px;
  padding:14px 10px 12px;
  border-radius:20px;
  background:var(--panel);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.drinkCard:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  border-color:var(--main);
}

.drinkCard.selected{
  border-color:var(--main);
  box-shadow:0 0 0 2px rgba(125,170,99,.35),0 12px 28px rgba(0,0,0,.6);
  transform:translateY(-6px);
}

.drinkName{
  margin-top:auto;
  font-size:11px;
  line-height:1.3;
  color:var(--muted);
  text-align:center;
}




.genGrid textarea{
  min-height:140px;
  resize:vertical;
}



/* SCROLLBAR – zöldes, sötét */
*::-webkit-scrollbar{
  width:8px;
}

*::-webkit-scrollbar-track{
  background:#0c0f0d;
  border-radius:8px;
}

*::-webkit-scrollbar-thumb{
  background:rgba(125,170,99,.45);
  border-radius:8px;
  border:2px solid #0c0f0d;
}

*::-webkit-scrollbar-thumb:hover{
  background:rgba(125,170,99,.7);
}