/* Shop-related screens: word packs, skins (background / character / music tabs). */

  /* ---------- WORD PACKS SCREEN ---------- */
  .play-time-banner{
    background: var(--card); border:2.5px solid var(--ink); border-radius:14px;
    padding: 12px 16px; text-align:center; margin-bottom:16px;
  }

  .play-time-banner .ptb-label{ font-size:15px; color:var(--ink-soft); }

  .play-time-banner .ptb-value{ font-family:'Caveat',cursive; font-weight:700; font-size:26px; }

  .pack-cat{ margin-bottom:18px; }

  .pack-cat h3{ font-size:23px; margin-bottom:8px; }

  .pack-row{
    display:flex; align-items:center; gap:12px;
    border:2.5px solid var(--ink); border-radius:12px; background:var(--card);
    padding:10px 14px; margin-bottom:8px;
  }

  .pack-row.locked{ opacity:.6; }

  .pack-row.disabled{ opacity:.55; }

  .pack-row .pack-icon{ font-size:22px; width:26px; text-align:center; flex-shrink:0; }

  .pack-row .pack-info{ flex:1; }

  .pack-row .pack-name{ font-family:'Caveat',cursive; font-weight:700; font-size:19px; }

  .pack-row .pack-sub{ font-size:13px; color:var(--ink-soft); }

  .pack-row.unlocked .pack-sub{ color: var(--green); }

  .pack-row.selectable{ cursor:pointer; }

  .pack-row.selectable:active{ transform: scale(0.98); }

  .pack-row.selected{ border-color: var(--gold); background: rgba(230,180,60,0.14); }

  .pack-row .pack-check{ font-size:18px; flex-shrink:0; }

  .pack-row .pack-progress{ margin-top:4px; }

  .pack-row .skin-action{ flex-shrink:0; }

  /* buyable-but-not-yet-owned win/lose melody or music track: a "listen" (preview) icon button next to
     the "Купить" button, same row */
  .pack-row .sound-buy-actions{ display:flex; align-items:center; gap:8px; }

  .btn.small.sound-listen-btn{
    width:38px; height:38px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  .sound-listen-btn svg{ width:18px; height:18px; }

  /* ---------- SKINS SCREEN ---------- */
  #skinsGrid{ display:flex; flex-direction:column; gap:12px; }

  /* ---------- SKINS SCREEN sub-tabs (Фон / Персонаж) ---------- */
  .skins-tabs{
    display:flex; gap:8px; margin: 4px 0 14px;
  }

  .skins-tab{
    flex:1; padding:10px; border:2.3px solid var(--ink); border-radius:999px;
    background: var(--card); font-family:'Caveat',cursive; font-weight:700; font-size:18px;
    color: var(--ink); cursor:pointer;
  }

  .skins-tab.active{ background: var(--ink); color: var(--paper); }

  .skin-tile{
    display:flex; align-items:center; gap:14px;
    border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card);
    padding: 12px 14px;
  }

  .skin-tile.equipped{ border-color: var(--green); background: #f1f7f2; }

  .skin-tile .skin-thumb{
    width:56px; height:56px; border-radius:10px; border:2px solid var(--grid);
    display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
    background: var(--paper);
  }

  .skin-tile .skin-thumb img{ width:100%; height:100%; object-fit:contain; }

  .skin-tile .skin-thumb svg{ width:70%; height:70%; }

  .skin-tile .skin-info{ flex:1; }

  .skin-tile .skin-name{ font-family:'Caveat',cursive; font-weight:700; font-size:20px; }

  .skin-tile .skin-price{ font-size:14px; color: var(--ink-soft); display:flex; align-items:center; gap:5px; }

  .skin-tile .skin-price .skin-price-coin{ display:flex; align-items:center; }

  .skin-tile .skin-price .skin-price-coin svg{ display:block; }

  .skin-tile .skin-action{ flex-shrink:0; }