button, input, .widget, .skin-img{
    padding: 10px 10px;
    border-radius: 16px;
    transition: filter 0.2s ease, background-color 0.2s ease;
    appearance: none;
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 3px;
    background-color:#45330b;
    color: aliceblue;
    border: none;
    box-shadow: 0 4px 0 #2e2204; 
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: none;
}

button {
    cursor: pointer;

    -webkit-tap-highlight-color: transparent; /* Tohle je povinnost, jinak to neuvidíš */
    transition: transform 0.1s ease, box-shadow 0.1s ease; /* Sjednoceno *-webkit-tap-highlight-color: transparent; /* Tohle je povinnost, jinak to neuvidíš */
}

button:hover {
    filter: brightness(1.1);
}

button:active {
    box-shadow: 0 0 0 #282828 !important;
    transform: translateY(4px) !important; /* Tohle je ten tvůj efekt */
}

input:hover {
    filter: brightness(1.1);
}

input:focus {
    outline: none;
}

h1 {
    color: aliceblue;
    margin-left: 8px;
    margin-top: 16px;
    margin-bottom: 3px;
    font-size: 36px;
}

.widget {
    background-color: #483407;
    width: 100%;
    display: flex;
    gap: 8px; /* mezera mezi tlačítky */
    padding: 0;
    padding-bottom: 10px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    box-shadow: 0 4px 0 #382803;
    flex-direction: column;
}

.widget button {
    background-color: #9d710a;
    box-shadow: 0 4px 0 #694b05;
    margin: 0;
    color: #1f1806;
    font-weight: bold;
}

h2 {
    margin: 0;
    color: #ffffff;
}

p {
    color: rgb(222, 216, 198);
}

#skins-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Aby sušenky neblokovaly klikání na hlavní hru */
  z-index: -1; /* Aby to bylo ZA hlavní sušenkou */
  overflow: hidden;
}

.falling-cookie {
  position: absolute;
  top: -50px; /* Začne nad obrazovkou */
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg); /* Spadne dolů a otočí se */
  }
}

#shopcontent {
    padding: 12px;
    height: 120%;           /* Musí být fixní výška, aby měl obsah kam "přetéct" */
    overflow-y: auto;        /* Automaticky přidá scrollbar, když je obsahu moc */

    /* Moderní vychytávky pro mobily */
    -webkit-overflow-scrolling: touch; /* Zajišťuje plynulé "setrvačné" scrollování na iOS */
    scrollbar-width: thin;   /* Elegantnější scrollbar ve Firefoxu */
}

#upgradescontent {
    padding: 12px;
    height: 100%;           /* Musí být fixní výška, aby měl obsah kam "přetéct" */
    overflow-y: auto;        /* Automaticky přidá scrollbar, když je obsahu moc */

    /* Moderní vychytávky pro mobily */
    -webkit-overflow-scrolling: touch; /* Zajišťuje plynulé "setrvačné" scrollování na iOS */
    scrollbar-width: thin;   /* Elegantnější scrollbar ve Firefoxu */
}

.button-disabled {
    cursor: not-allowed;
}

.button-disabled:active {
    box-shadow: 0 4px 0 #2e2204 !important;
    transform: translateY(0px) !important; /* Tohle je ten tvůj efekt */
}

.button-disabled:hover {
    filter: brightness(1.0);
}

.divnybutton {
    filter: brightness(0.8);
}

.divnybutton:hover {
    filter: brightness(0.9);
}

img {
    -webkit-touch-callout: none;
}

.skin-img {
    background-color: #2e2204;
    box-shadow: 0 4px 0 #201803; 
    margin: 0;
}

.gemsLabel {
    display: inline-block;
    color: #ffffff; 
    font-weight: 1000;
}

.levelLabel {
    display: inline-block;
    color: #ffffff; 
    font-weight: 1000;
}


/* Notifikace */
#notification {
    position: fixed;
    top: -200px; /* schovaná nad obrazovkou */
    left: 50%;
    transform: translateX(-50%);
    
    background: #874b22;
    color: white;
    padding: 12px;
    border-radius: 16px;
    
    box-shadow: 0 4px 0 #4f3413; 
    
    transition: top 0.4s ease; /* animace */
    z-index: 1000;
}

/* Když je aktivní */
#notification.show {
    top: 100px; /* sjede dolů */
}

#touchpls {
    top: 300px;
    left: 50%;
}

#touchpls.show {
    top: 100px;
    left: 50%;
}

.gemsLabel {
    padding: 1px 2px;
    border-radius: 16px;
    transition: filter 0.2s ease, background-color 0.2s ease;
    appearance: none;
    background-color:#45330b;
    color: aliceblue;
    border: none;
    box-shadow: 0 2px 0 #2e2204; 
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: none;
}