/* ui-container: a játékmezőt tartalmazó konténer
    display értékét kívülről állítjuk pl. a belépő oldalról "none" v. "flex"
    a játékmezőt fentről lefelé töltik fel a sávok
        flex-direction: column;

    vízszintes sávokat tartalmaz:
        - ellenfél választó
        - ellenfél adatlap
        - híroldal
        - KampánY logó :)
        - saját adatlap
        - akció sáv (saját lépés esetén)
    A sávok maguk is flex konténerek, a feltöltés balról jobbra halad.

*/

.ui-container {
    flex-direction: column;
    height: 100vh;
    
}

.felso-panel {
    flex-direction: column;
    height: 65vh;
    
}

.also-panel {
    display: flex;
    flex-direction: column;
    height: 35vh;
    width: 100vw;
    position: absolute;
    bottom: 0px;
}

.akcio-fej {
    height: 5vh;
    width: 100vw;
    font-size: 3vh;
    alignment-baseline: middle;
    text-align: center;
}


.gomb {
    display: flex;
    border: 2px;
    border-radius: 10px;
    border-style: solid;
}

.passziv-gomb {
    background-color: gray;
}

.gomb-scaler{
    max-height: 30px;
    aspect-ratio: 1 / 1;
}



/******************************************************************
A ténylegesen használt/ ellenőrzött stílusok: lásd fent
*******************************************************************/

/*
    SVG coloring for active/retired friends
*/

.aktiv-barat {
    height: 80%;
    padding-top: 10%;
    filter: invert(85%) sepia(56%) saturate(5256%) hue-rotate(345deg) brightness(102%) contrast(101%);
    width: 80px;
}

.bukott-barat {
    height: 80%;
    padding-top: 10%;
    filter: invert(56%) sepia(4%) saturate(4290%) hue-rotate(6deg) brightness(87%) contrast(63%);
    width: 80px;
}

.ell_avatar {
    max-width: 80px;
    width: 14vw;
    flex-shrink: 1;
}

/* 16vw: allow placing 6 elements in the view */
.scaler{
    max-height: 80px;
    aspect-ratio: 1 / 1;
    width: 80px;
}

.barat{
    padding-top: 5px;
    padding-left: 10px;
}

.no_border{
    height: 8vh;
}

.thin_border{
    border: 1vh;
    border-style: solid;
    height: 8vh;
}

.left {
  position: absolute;
  left: 0px;
}

.right {
  position: absolute;
  right: 0px;
}

.history{
    height: 50vh;
    overflow-y: scroll;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

.bugyor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: x-large;
  font-weight: bold;
}

/*
    Pie chart generator for pocket money
*/

.piechart{
    /* style for SVG must define size to scale properly */
    width: 20vw;
    max-width: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    vertical-align: middle;
}
.pie0 {
    background-image: conic-gradient(
        bisque 0deg,
        lightgray 0
    );
}

.pie1 {
    background-image: conic-gradient(
        bisque 36deg,
        lightgray 0
    );
}

.pie2 {
    background-image: conic-gradient(
        bisque 72deg,
        lightgray 0
    );
}

.pie8 {
    background-image: conic-gradient(
        gold 288deg,
        lightgray 0
    );
}

/* teljes kör */
.pie10 {
    background-image: conic-gradient(
        gold 360deg,
        lightgray 0
    );
}

/*
	Grid container for player status display
*/

.grid-container {
  max-height: 200px;
  height: 10vh;
  display: flex;
  gap: 3px;
  background-color: blueviolet;
  padding: 10px;
  position: relative;
}

.wrap-container{
    flex-wrap: wrap;
}

.jatekos-container {
  display: grid;
  gap: 3px;
  background-color: blueviolet;
  padding: 10px;
  position: relative;
}

/* Relative URLs, if used, are relative to the URL of the stylesheet */

.ell_perget{
  border-image-source: url('icon/border-shifting.svg');
  border-image-slice: 20%;
  border-image-repeat: stretch;
}

.ell_passive{
  border-image-source: url('icon/border-passive.svg');
  border-image-slice: 20%;
  border-image-repeat: stretch;
}


.ell_rogzit{
  border-image-source: url('icon/border-fixed.svg');
  border-image-slice: 20%;
  border-image-repeat: stretch;
}


[data-tooltip]:hover::after {
  display: block;
  position: absolute;
  content: attr(data-tooltip);
  border: 1px solid black;
  background: #eee;
  padding: .25em;
}