/* global styles */

* {
    box-sizing: border-box;
}

/* =========================================================
   MAHJONG – ALAP SZÍNVEZÉRLÉS (JEGYZETELT VERZIÓ)
   Itt tudod állítani:
   – a teljes játék hátterét
   – a kockák (tile-ok) színeit
   – a gombok kinézetét
   ========================================================= */

:root {
  /* 🧾 SZÖVEGEK */
 --font-color: rgba(20, 18, 16, 0.78);

  /* 🌌 MAHJONG HÁTTÉR (szín + opcionális kép) */
  --background-color: rgba(248, 175, 132, 0.75);

  /* háttérkép (opcionális) – a style.css mellől nézve */
  --background-image: url("img/majbackground.jpg");

  /* kép megjelenése */
  --background-size: cover;
  --background-position: center;
  --background-repeat: no-repeat;

  /* fátyol erőssége (0–1) */
  --background-alpha: 0; /* 0 = nincs fátyol, 0.15 = finom, 0.75 = erős */

  /* ↑ Alpha (0.1–0.5):
     kisebb = áttetszőbb
     nagyobb = sötétebb háttér */


  /* ==============================
     🀄 KOCKÁK / TILE-OK SZÍNEI
     ============================== */

  /* Kocka világos oldala (fény felől) */
--tile-top-left-color: rgb(246, 240, 228);  /* elefántcsont */

/* Kocka árnyékos oldala (mélység) */
--tile-bottom-right-color: rgb(214, 201, 178); /* meleg árnyék */

/* Kockák körvonala */
--tile-border-color: rgba(120, 86, 40, 0.55);

/* Kocka hátoldala (amikor nincs elöl) */
--tile-back-color: rgba(18, 16, 14, 0.55);

/* Kocka, amikor fölé viszed az egeret */
--tile-hover-color: rgb(233, 204, 128);

/* Kocka, amikor figyelmeztet / hint */
--tile-alert-color: rgb(212, 170, 90);



  /* ==============================
     🔗 LINKEK SZÍNE
     (pl. Info szövegben)
     ============================== */
  --button-text-color: rgba(255,255,255,0.88);



  /* ==============================
     🔘 GOMBOK SZÍNEI
     (Restart, Hint, Info)
     ============================== */

  /* Alap gomb szín */
 --button-color: rgba(20, 18, 16, 0.22);

  /* Gomb, amikor fölé viszed az egeret */
--button-hover-color: rgba(186, 140, 62, 0.85);

    /* base game size */
    --base-width: 1000px;
    --base-height: 700px;

    /* iframe / container scale (R3-ból vagy belső fit scriptből állítható) */
    --mw-scale: 1;
}

/* fontos: iframe-ben ne legyen belső görgetés */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 300;
  font-size: 18px;

  background:
    linear-gradient(
      rgba(248,175,132,var(--background-alpha)),
      rgba(248,175,132,var(--background-alpha))
    ),
    var(--background-image);

  background-size: var(--background-size);
  background-position: var(--background-position);
  background-repeat: var(--background-repeat);

  color: var(--font-color);
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}


strong {
    font-weight: 600;
}

/* wrapper */

#wrapper {
    transform-origin: top center;
    width: var(--base-width);
    transform: scale(var(--mw-scale, 1));
}

/* header */

header {
    text-align: center;
    padding: 20px 0px;
    font-size: 28px;
    letter-spacing: 0.5px;
}

/* main */

main {
    position: relative;
}

/* footer */

footer {
    padding-top: 15px;
}

#statusText {
    float: left;
}

#controls {
    float: right;
}

/* buttons */

button {
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--font-color);
    background-color: var(--button-color);
    padding: 5px 15px;
    margin-left: 10px;
    transition: background-color 100ms linear;
}

button:hover {
    cursor: pointer;
    background-color: var(--button-hover-color);
}

/* infotext */

#infoText {
    height: 100%;
    display: none;
    position: absolute;
    z-index: 1;
    padding: 0px 150px;
    text-align: justify;
    font-size: 20px;
}

#infoText a {
    color: var(--link-color);
    text-decoration: none;
}

#infoText a:hover {
    color: var(--tile-alert-color);
}

#infoText img {
    width: 52px;
    border-radius: 5px;
    background-image: linear-gradient(
        to left top,
        var(--tile-bottom-right-color),
        var(--tile-top-left-color)
    );
    transition: transform 150ms ease;
    border: 2px solid var(--background-color);
    margin: 0px 5px;
}

#infoText img:hover {
    transform: scale(1.2);
}

/* game */

#game {
    height: var(--base-height);
    background: transparent none no-repeat center;
    position: relative;
    border-radius: 5px;

    /* biztosan látszódjon iframe-ben is */
    opacity: 1;
}

/* tile */

.tile {
    position: absolute;
}

.tileFront {
    position: absolute;
    background-image: linear-gradient(
        to left top,
        var(--tile-bottom-right-color),
        var(--tile-top-left-color)
    );
    border: 1px solid var(--tile-border-color);
}

.tileFront:hover {
    cursor: pointer;
    background-image: linear-gradient(
        to left top,
        var(--tile-hover-color),
        var(--tile-hover-color)
    );
}

.selectedTile {
    background-image: linear-gradient(
        to left top,
        var(--tile-hover-color),
        var(--tile-hover-color)
    );
}

.alertTile {
    background-image: linear-gradient(
        to left top,
        var(--tile-alert-color),
        var(--tile-alert-color)
    );
}

.tileBack {
    position: absolute;
    background-color: var(--tile-back-color);
    border: 1px solid var(--tile-border-color);
}

/* media queries (a base-width/padding maradhat, de wrapper-scale NE írja felül a --mw-scale-t) */

@media (max-width: 1010px) {
    .tile {
        transform: translateX(-65px);
    }
    :root {
        --base-width: 865px;
    }
    #infoText {
        padding: 0px 80px;
    }
}

/* ⚠️ IFRAME-MÓD: a régi lépcsőzetes wrapper-transform skálázást kikapcsoljuk,
   mert ütközik a --mw-scale-lal és szétesést okoz.
   Ha mobilra később kell, akkor külön, tudatosan visszahozzuk. */

/*
@media (max-width: 875px) { #wrapper { transform: scale(0.95); } }
@media (max-width: 830px) { #wrapper { transform: scale(0.9); } }
@media (max-width: 780px) { #wrapper { transform: scale(0.85); } }
@media (max-width: 745px) { #wrapper { transform: scale(0.8); } }
@media (max-width: 700px) { #wrapper { transform: scale(0.75); } }
@media (max-width: 660px) { #wrapper { transform: scale(0.7); } }
@media (max-width: 620px) { #wrapper { transform: scale(0.65); } }
@media (max-width: 570px) { #wrapper { transform: scale(0.6); } }
@media (max-width: 520px) { #wrapper { transform: scale(0.55); } }
@media (max-width: 480px) { #wrapper { transform: scale(0.5); } }
@media (max-width: 435px) { #wrapper { transform: scale(0.45); } }
@media (max-width: 390px) { #wrapper { transform: scale(0.4); } }
@media (max-width: 350px) { #wrapper { transform: scale(0.35); } }
*/
/* INFO szöveg olvashatóság */
#infoText {
  color: rgba(20, 18, 16, 0.82);        /* szolid, de olvasható */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.767); /* finom papír-fény */
  line-height: 1.30;
  
}

/* a cím (Berg und Stein) */
header {
  color: rgba(20, 18, 16, 0.78);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.699);
}


#infoText p {
  display: inline-block;
  padding: 0.35em 0.6em;
  margin: 0.4em 0;

  background: linear-gradient(
    to right,

    rgba(255, 255, 255, 0.562),
    rgb(255, 255, 255),
    rgb(255, 255, 255),
    rgba(255, 255, 255, 0.603)
   
  );

  color: #2b2b2b;
  line-height: 1.3;
}