:root {
      --common: #4caf50;
      --rare: #2196f3;
      --epic: #9c27b0;
      --legendary: #ffeb3b;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      display: flex;
      height: 100vh;
      font-family: sans-serif;
      background: #ebd8cf;
      overflow: hidden;
    }
    /* Sidebar */
    #sidebar {
      width: 250px;
      background: linear-gradient(135deg,#C68B59, #D7B19D);
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      border-right: 2px solid #865439;
      border-radius: 0 15px 15px 0;
    }
    /* Profile widget */
    #profileWidget {
      background: white;
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    #profileWidget .emoji {
      font-size: 48px;
      user-select: none;
    }
    #profileWidget .name {
      font-size: 1.2em;
      font-weight: 600;
      margin: 6px 0;
      user-select: none;
    }
    #profileWidget .level {
      font-weight: 500;
      color: #383838;
    }
    #xpBar {
      background: #eaeaea;
      border-radius: 8px;
      height: 12px;
      margin: 8px 0;
      overflow: hidden;
    }
    #xpFill {
      background: #63a35c;
      width: 0;
      height: 100%;
      transition: width 0.3s ease;
    }
    #money {
      margin-top: 8px;
      font-weight: 600;
      color: #117a37;
      user-select: none;
    }
    /* Menu buttons */
    #sidebar button {
      padding: 10px;
      border: none;
      border-radius: 10px;
      background: #865439;
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    #sidebar button:hover:not(:disabled) {
      background: #402218;
    }
    #sidebar button:disabled {
      background: #ba7878;
      cursor: default;
    }
    /* Main */
    #main {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background: #ebd8cf;
      border-radius: 15px 0 0 15px;
      position: relative;
    }
    /* Inventory */
    #inventory {
      position: fixed;
      bottom: 15px;
      right: 15px;
      width: 260px;
      max-height: 240px;
      background: white;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border-radius: 12px;
      padding: 12px;
      overflow-y: auto;
      font-size: 14px;
    }
    #inventory h3 {
      margin-bottom: 8px;
      font-weight: 600;
    }
    .inventory-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px;
      border-radius: 8px;
      margin-bottom: 6px;
      cursor: pointer;
    }
    .inventory-item.common { color: var(--common); }
    .inventory-item.rare { color: var(--rare); }
    .inventory-item.epic { color: var(--epic); }
    .inventory-item.legendary { color: var(--legendary); }
    .inventory-item button {
      background: #e55353;
      border: none;
      border-radius: 6px;
      color: white;
      width: 24px;
      height: 24px;
      line-height: 0;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.3s;
    }
    .inventory-item button:hover {
      background: #bb2e2e;
    }
    /* Missions */
    .mission {
      background: #C68B59;
      border-radius: 10px;
      padding: 10px;
      margin: 8px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: #282828;
      box-shadow: 0 2px 8px #0000001a;
    }
    .mission button {
      padding: 6px 12px;
      border: none;
      border-radius: 8px;
      background: #000000;
      color: white;
      cursor: pointer;
      transition: background 0.3s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .mission button:disabled {
      background: #565656;
      cursor: default;
    }
    /* Setup modal */
    #setup {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    #setup .modal {
      background: white;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      width: 320px;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }
    #setup input {
      width: 100%;
      padding: 8px;
      font-size: 1em;
      margin: 10px 0;
      border-radius: 8px;
      border: 1px solid #ccc;
    }
    #setup .emoji-select button {
      font-size: 1.5em;
      margin: 0 5px;
      background: none;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    #setup .emoji-select button.selected {
      transform: scale(1.3);
      filter: drop-shadow(0 0 4px #0077cc);
    }
    #setup button#startBtn {
      margin-top: 12px;
      padding: 8px 16px;
      font-size: 1em;
      border: none;
      border-radius: 8px;
      background: #4a90e2;
      color: white;
      cursor: pointer;
      transition: background 0.3s;
    }
    #setup button#startBtn:disabled {
      background: #aacdfb;
      cursor: default;
    }

    .sell-btn {
    position: relative;
    cursor: pointer;
    }

    .sell-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 1;
    z-index: 10;
    }
        #exploreSection {
      margin-top: 20px;
      padding: 10px;
      border: 2px solid #333;
      border-radius: 8px;
      background: #f9f9f9;
    }
    #exploreBtn {
      font-size: 1.2em;
      padding: 10px 20px;
      cursor: pointer;
    }
    #cooldownText {
      margin-top: 10px;
      font-weight: bold;
      color: #d33;
    }
    #explorationBook {
      margin-top: 20px;
      border-top: 1px solid #aaa;
      padding-top: 10px;
    }
    #explorationBook h3 {
      margin-bottom: 10px;
    }
    .discovery {
      margin-bottom: 8px;
      background: #fff;
      padding: 8px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .discovery-title {
      font-weight: bold;
    }
    .discovery-desc {
      font-style: italic;
      color: #555;
    }

      #sidebarFooter {
    text-align: center;
    font-size: 0.8em;
    color: #000000;
    margin-top: 15px;
    user-select: none; /* aby to nešlo náhodou označit */
    }

      #advWidget {
      background: white;
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-top: 6px;
    }

          #lga {
    text-align: center;
    font-size: 0.8em;
    color: #000000;
    margin-top: 15px;
    user-select: none;
    }

          #lgaem {
    text-align: center;
    font-size: px;
    color: #000000;
    margin-top: 15px;
    user-select: none; /* aby to nešlo náhodou označit */
    }

        .shop-button {
      padding: 6px 12px;
      border: none;
      border-radius: 8px;
      background: #24b45b;
      color: rgb(255, 255, 255);
      cursor: pointer;
      transition: background 0.3s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-top: 6px;
    }

          #giftWidget {
      width: 150px;
      background: white;
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-top: 6px;
    }

    .shop-button:disabled {
  background-color: #ccc;
  color: #888;
  cursor: not-allowed;
  opacity: 0.6;
  }
  
      #exploreSection {
      margin-top: 20px;
      padding: 10px;
      border: 2px solid #333;
      border-radius: 8px;
      background: #f9f9f9;
      max-width: 300px;
    }
    #exploreBtn {
      font-size: 1.2em;
      padding: 12px 30px;
      cursor: pointer;
      background: linear-gradient(135deg, #4caf50, #2e7d32);
      color: white;
      border: none;
      border-radius: 25px;
      box-shadow: 0 4px 8px rgba(46, 125, 50, 0.4);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    #exploreBtn:hover:enabled {
      background: linear-gradient(135deg, #66bb6a, #388e3c);
      box-shadow: 0 6px 12px rgba(56, 142, 60, 0.6);
    }
    #exploreBtn:disabled {
      background: #a5d6a7;
      cursor: not-allowed;
      box-shadow: none;
      color: #eee;
    }
    #cooldownInfo {
      margin-top: 10px;
      font-weight: bold;
      color: #d33;
      font-size: 1.1em;
    }
    #explorationBook {
      margin-top: 20px;
      border-top: 1px solid #aaa;
      padding-top: 10px;
    }
    #explorationBook h3 {
      margin-bottom: 10px;
    }
    .discovery {
      margin-bottom: 8px;
      background: #fff;
      padding: 8px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .discovery-title {
      font-weight: bold;
    }
    .discovery-desc {
      font-style: italic;
      color: #555;
    }

    #settingsBtn.icon-btn {
      position: absolute;
      bottom: 15px;
      left: 15px;
      background: rgb(92, 67, 63);
      border: none;
      border-radius: 16px;
      font-size: 24px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    #settingsBtn.icon-btn:hover {
      background: #ddd;
    }

      body.fade-out {
    animation: fadeOut 0.5s forwards;
  }

  @keyframes fadeOut {
    to {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  .discovery.undiscovered {
  opacity: 0.4;
  filter: grayscale(100%);
  }

  #gameTime {
    position: fixed;
    top: 10px;
    right: 10px;  /* změna sem */
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    border-radius: 8px;
    z-index: 9999;
    user-select: none;
  }